博客

今天我们给多选下拉框增加一个全选功能

我们采用的框架的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;

    },