基础效果
其实在element ui里面已经实现了el-select的多选效果
主要是multiple属性,另外collapse-tags可以将他们合并成一段文字
但是这样的效果做不到可以全选
全选效果
下面是代码
页面部分
<el-form-item label="可全选下拉框" prop="apply">
<el-select multiple collapse-tags v-model="ruleForm.apply" @change="changeSelect" placeholder="请选择应用" style="width:100%">
<el-checkbox v-model="allCheck" @change="selectAll" style="margin-left:10px;padding:5px 0">全选</el-checkbox>
<el-option
v-for="(item, index) in appOptions"
:label="item.label"
:value="item.code"
:key="index"
/>
</el-select>
</el-form-item>
页面部分主要是添加了一个checkbox用于全选
相关初值
appOptions: [
{ code: 'No1', value: '01' },
{ code: 'No2', value: '02' },
{ code: 'No3', value: '03' },
{ code: 'No4', value: '04' },
{ code: 'No5', value: '05' }
],
allCheck: false,
ruleForm: {
apply: [],
}
相关方法
/** 下拉框全选 */
selectAll () {
this.ruleForm.apply = []
if (this.allCheck) {
let tmpArr = []
this.appOptions.forEach((item) => {
tmpArr.push(item.code)
})
this.ruleForm.apply = tmpArr
} else {
this.ruleForm.apply = []
}
},
/** 切换全选状态 */
changeSelect (val) {
if (val.length === this.appOptions.length) {
this.allCheck = true
} else {
this.allCheck = false
}
}
}
通过切换checkbox的allcheck将选项推入数组然后进行赋值
select绑定change方法,通过选中的选项长度是否与默认长度一致判断是否进行了全选,实现效果