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

<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: '王五'}]

clipboard.png

不管怎么选,页面上的数据都只显示最后一个数据,但是检测到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]
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注