欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue elementui 多选功能

程序员文章站 2022-06-07 13:14:34
...

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

//增加的
 <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;
    }, 
 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();
    },

四、实现效果
vue elementui 多选功能
vue elementui 多选功能