您现在的位置是:首页 >技术交流 >Vue3中Element Plus中Select选择绑定异常网站首页技术交流

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

hahahzzzzz 2025-05-03 12:01:03
简介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
})
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。