ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和
获取值
场景
要实现的效果如下
官⽅⽰例代码实现多选
为el-select设置multiple属性即可启⽤多选，此时v-model的值为当前选中值所组成的数组。
默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为⼀段⽂字。
<template>
<el-select v-model="value1" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="value2"
multiple
collapse-tags
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
jquery获取下拉框选中值:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄⾦糕'
}, {
value: '选项2',
label: '双⽪奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须⾯'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value1: [],
value2: []
}
}
}
</script>
注：
实现
上⾯展⽰的实现效果⾸先在页⾯添加⼀个el-select并设置其为multiple⽀持多选
<el-select
v-model="sz"
placeholder="请选择操作员"
multiple
clearable
:
>
<el-option
v-for="dict in czyOptions"
:key="dict.userId"
:label="dict.userName"
:value="dict.userId"
/>
</el-select>
这⾥在设置下拉框的数据源时使⽤的是czyOptions这个对象数组，需要提前声明
data() {
return {
// 操作员字典
czyOptions: [],
为了给此数据源赋值
需要在created⽅法中调⽤加载下拉框数据的⽅法
created() {
},
调⽤getUserList⽅法请求后台数据
getUserList() {
/
/获取操作员数据
listUser(this.user).then((response) => {
});
},
其中listUser是请求后台数据的⽅法
将返回数据赋值给上⾯的对象数组。
这样通过对下拉框进⾏v-model数据绑定
v-model="sz"
其中czysz是⼀个数组就能获取到下拉框的:value="dict.userId"绑定的value值的数组。