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

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>

 

如何解决？

• 其实很简单value绑定的值是number 类型，你回显的值的类型是string类型，我下来看了一下el-select的源代码，用的是=== 多了一个类型比较

   

• 由此得出结论我们需要传入和value对应类型的值，所以我们改为回显正常，

   

   

总结

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