element el-select 下拉选中对象
本文章主要是说明element UI 里面的下拉框选中对象的问题 一般来说都是选中的绑定的value(唯一值) 但是value如何绑定对象呢?
1. 设置成对象 :value="item"
2. 要有 value-key=“id”
1.HTML
<el-select
style="width: 200px; margin-left: 20px"
v-model="valuedd"
value-key=“id”
placeholder="请选择"
@change="ceshi($event)"
>
<el-option
v-for="item in userList"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
2. JS 返回数据部分(data)
userList: [
{
id: 1,
userName: "黄金糕",
},
{
id: 2,
userName: "双皮奶",
},
{
id: 3,
userName: "蚵仔煎",
},
{
id: 4,
userName: "龙须面",
},
{
id: 5,
userName: "北京烤鸭",
},
],
valuedd: "",
(valuedd不允许放在某个对象里面,如若传输 虚重新赋值)
JS methods 部分
ceshi(val) {
console.log(val, "对象");
},
打印结果
![](https://img2022.cnblogs.com/blog/1333164/202203/1333164-20220328191037003-402976448.png)