效果图:
代码:
<el-select
v-model="xxx"
multiple
value-key="id"
collapse-tags
@change="clk">
<el-option
v-for="(item,index) in arrs"
:label="item.name"
:value="item"
:key="index">
</el-option>
</el-select>
data() {
return {
xxx:'',
arrs:[
{id:0,name:'00',sex:'0',cont:'000'},
{id:1,name:'11',sex:'1',cont:'111'},
{id:2,name:'22',sex:'2',cont:'222'},
],
}
},
methods: {
clk(){
console.log(this.xxx);
},
}
参数说明:
v-model=“xxx” :绑定的属性
multiple :控制多选
value-key=“id” :唯一标识,绑定值为对象类型时必填,id是你那个对象里面的某个属性
collapse-tags :选了好几个选项,内容长度超出了就把后面的选项改成+1显示
@change=“clk :点击事件
v-for=”(item,index) in arrs" :循环的数组
:label=“item.name” :选项
:value=“item” :绑定的对象
:key=“index” 唯一值
如果想绑定对象里面的一个属性,:value那里就绑定item.xxx就可以了。
没了,结束了,是不是很简单呐
最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~