el-select绑定值的坑

前端小怪兽zmy2023-12-26 1:39

碰到一个问题，选择框的数据是后端传过来的，下拉框的数据也是后端传过来的，但是打开下拉框时，发现数据没有高亮。

最后发现，只要选择框v-model给的值和option的value绑定的值一致，就可以高亮。

大多数情况下，都绑定的是value值（下图的name），所以发现不了这个问题。

其实两个都绑定id也是可以的，只要两个绑定的一致就行。

html 复制代码

<el-select v-model="form" class="m-2" placeholder="Select" size="large">
    <el-option 
        v-for="item in options" 
        :key="item.value" 
        :label="item.name" 
        :value="item.id" /> //value绑定的值是id
</el-select>

const options = [
  {
    id: '123',
    name: '名字一'
  },
  {
    id: '456',
    name: '名字二'
  },
  {
    id: '789',
    name: '名字三'
  }
]

let form= ref('123') //v-model给的值也是id

不是说，form给的值是什么就显示什么，这里form给123，但是选择框显示的还是名字一。

因此，option的label决定了显示。