Vue3中Element Plus中Select选择绑定异常

1. 异常表现

1. 后端返回多个数据时，明确设置的绑定对应的是第一个值，却总会变成最后一个

2. 代码展示

2.1 Select选择器代码

<el-select v-model="curSitecode" placeholder="站点选择">
 <el-option v-for="dict in sitecodeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
</el-select>

2.2 JS设置代码

const sitecodeOptions = ref([])
const curSitecode = ref(null)

proxy.getDicts('sys_sitecode').then((response) => {
  sitecodeOptions.value = response.data
  curSitecode.value = sitecodeOptions.value[0]
})

3. 原因解释

1. curSitecode绑定是一个对象，就会出现这种异常，明明设置了curSitecode.value = sitecodeOptions.value[0]，但是界面的值确实数组最后一个数据的。curSitecode设置数字或者字符串就可以。

4. 修改后代码

const curSitecode = ref(0)

proxy.getDicts('sys_sitecode').then((response) => {
  sitecodeOptions.value = response.data
  curSitecode.value = sitecodeOptions.value[0].dictValue
})