今天我们给多选下拉框增加一个全选功能
我们采用的框架的vue2.x。组件库选取的是element的el-select组件。下面直接上代码
效果图
HTML
<el-select filterable clearable v-model="tableHeadArr" multiple placeholder="请选择" @change="selectChange" >
<el-option label="全选" value="selectAll" v-if="tableHeadList.length > 0"></el-option>
<el-option
v-for="item in tableHeadList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
JS
// 首先要到data中定义tableHeadList:[], tableHeadArr: [], oldSeleValue:[],
// allSeleValue为下拉框的所有值可以直接在computed中定义
computed:{
allSeleValue(){
return this.tableHeadList.map(v=>v.id);
}
},
// methods中selectChange的方法
selectChange(val){
// 用来储存上一次的值,可以进行对比
const oldVal = this.oldSeleValue.length === 1 ? this.oldSeleValue[0] : [];
// 若是全部选择
if (val.includes('selectAll')) {
this.tableHeadArr = Object.assign([],this.allSeleValue);
this.tableHeadArr.push('selectAll');
}
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes('selectAll') && !val.includes('selectAll')) this.tableHeadArr = [];
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes('selectAll') && val.includes('selectAll')) {
const index = val.indexOf('selectAll');
val.splice(index, 1); // 排除全选选项
this.tableHeadArr = val
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes('selectAll') && !val.includes('selectAll')) {
if (val.length === this.allSeleValue.length) {
this.tableHeadArr.push('selectAll');
};
}
// 储存当前最后的结果 作为下次的老数据
this.oldSeleValue[0] = this.tableHeadArr;
},