element-plus中的el-select回显错误如何解决?

321

element-plus中的el-select回显错误如何解决?

今天遇到一个小bug就是el-select组件选中的值显示的却是value的值,在这里小小记录一下,来悔过摆烂的一天😛 人生不摆烂,快乐少一半。废话不多说上代码。

<template>
 <el-select v-model="value" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
</template><script lang='ts' setup>
    // 问题代码
 const value = ref('1')
    const options = [
      {
        value: 1,
        label: 'Option1',
      },
      {
        value: 2,
        label: 'Option2',
      },
      {
        value: 3,
        label: 'Option3',
      },
      {
        value: 4,
        label: 'Option4',
      },
      {
        value: 5,
        label: 'Option5',
      },
    ]
</script>

image-20220818201925952.png

如何解决?

  • 其实很简单value绑定的值是number 类型,你回显的值的类型是string类型,我下来看了一下el-select的源代码,用的是=== 多了一个类型比较image-20220818204348818.png
  • 由此得出结论我们需要传入和value对应类型的值,所以我们改为image-20220818204836561.png回显正常,

image-20220818204922308.png

总结

世上无难事,只要你肯放弃。加油你还年轻。