element-plus中的el-select回顯錯(cuò)誤如何解決？

今天遇到一個(gè)小bug就是el-select組件選中的值顯示的卻是value的值，在這里小小記錄一下，來(lái)悔過(guò)擺爛的一天?? 人生不擺爛，快樂(lè)少一半。廢話不多說(shuō)上代碼。

<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>
 ? ?// 問(wèn)題代碼
 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>

?

如何解決？

• 其實(shí)很簡(jiǎn)單value綁定的值是number 類型，你回顯的值的類型是string類型，我下來(lái)看了一下el-select的源代碼，用的是=== 多了一個(gè)類型比較

  ?

• 由此得出結(jié)論我們需要傳入和value對(duì)應(yīng)類型的值，所以我們改為回顯正常，

  ?

  ?

總結(jié)

世上無(wú)難事，只要你肯放棄。加油你還年輕。