一、在选择框上方添加一个多选
//增加的
<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();
},
四、实现效果