vue elementui checkbox多选框功能

一、在选择框上方添加一个多选

//增加的
 <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            class="fla"
            >全选</el-checkbox
          >
          //以下是被选择的数据
          <el-checkbox-group v-model="checkList" @change="handleFilter">
            <el-checkbox
              v-for="col in datasetColumnList"
              :key="col.columnCode"
              :label="col.columnCode"
              style="width: 130px; margin: 6px 0"
            >
              {{ col.columnName }}
            </el-checkbox>
          </el-checkbox-group>

二、data

checkAll: true
datasetColumnList: []
isIndeterminate: false,

三、methods

 handleCheckAllChange(val) {  //监听全选按钮的变化
		      var arr = [];
		      for (var i = 0; i < this.datasetColumnList.length; i++) {
		        arr.push(this.datasetColumnList[i].columnCode);
		      }
		      this.checkList = val ? arr : [];
		      this.isIndeterminate = false;
		      this.handleFilter(this.checkList)  //	全选时将被选择的数据传给⬇️ 即时监听
    }, 
 handleFilter(value) {  //监听所有数据的被选择情况
      let checkedCount = value.length;
      this.pageNo = 1;
      this.datasetPageAllList = this.datasetList.filter((dataset) => {
        return this.checkList.indexOf(dataset.fieldCode) > -1;
      });
      //以下重要
      this.total = this.datasetPageAllList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.datasetColumnList.length;

      this.renderCharts();
    },

四、实现效果