【Vue】element ui框架如何正确的把el-select选项的value设置为对象？

• Z时代
• 2024-01-10
• 分类：技术分享

<el-select
placeholder="请选择审批人"
value-key="name"
v-model="approver">
<el-option
v-for="item in approvers"
:key="item.id"
:label="item.id"
:value="item">
</el-option>
</el-select>

approvers的数据为

[{id: 1, name: '张三'}, {id: 2, name: '李四'},{id: 3, name: '王五'}]

不管怎么选，页面上的数据都只显示最后一个数据，但是检测到approver数据实际上是正确的, <el-select>选项的这种写法是错误的么？

已经解决了，谢谢

回答

给 <el-select> 加上 value-key 属性，值为数据源数组元素中的唯一键
例如数据源数组

[{id: 1, name: '张三'}, {id: 2, name: '李四'},{id: 3, name: '王五'}]

那么可设置 value-key="id" 、value-key="name"
如下：

<el-select v-model="value" value-key="id" placeholder="请选择">

https://jsfiddle.net/1erjhcL3/1/

我也遇到了这个bug，请问你是怎么解决的呢？

v-for里面使用elSelect，里面的vModel变量怎么命名？（v-for的list需要支持动态增减）

给el-select上的设value-key值，这个值是el-option上data绑定对象的一个属性名，作为这条el-option的key来区分，就可以正确显示了

事实上，这样才对。

<el-select
    placeholder="请选择审批人"
    value-key="id"
    v-model="approver">
    <el-option
        v-for="item in approvers"
        :key="item.id"
        :label="item.name"
        :value="item">
    </el-option>
</el-select>

当你使用了value-key，approver就是一个对象，对象包含所有的信息。

另外,我自己遇到了回显问题，从服务器返回的是id，因为我数据库只存了id

回显问题，那如何定义回显？
如果直接设置approver = id是不行的，因为approver是一个对象，我们要实现approver.id = id，但是其他信息不知道，

所以要自定义一个方法，从数据中筛选

setDefautValue(id){
    this.approver = this.approvers.filter(item => item.id === id)[0]
}

以上是 【Vue】element ui框架如何正确的把el-select选项的value设置为对象？ 的全部内容， 来源链接： utcz.com/a/72799.html