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對應類型的值，所以我們改為回顯正常，

  ?

  ?

總結

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