场景
element 树状表格，表格全选时所有项（包括所有子节点）都选中，选中树状表格父节点时，这个父节点下所有子节点也都要选中，如果某个父节点下的所有子节点没有全部，则这个父节点处于半选状态
效果图
实现
通过row-class-name和header-row-class-name控制复选框不确定状态显示，通过select-all和select事件判断是否选中，isSelect字段代表是否选中，true是选中，false是不选中，空为不确定
qz-pro-table组件是根据el-table进行二次封装，使用与el-table一样
<template>
<qz-pro-table
ref="table"
border
row-key="id"
:data-source="getDataList"
@select-all="selectAllFun"
:row-class-name="rowClassNameFun"
:header-row-class-name="headerRowClassName"
@select="selectFun"
:tree-props="{
children: 'databaseSourceList',
hasChildren: 'hasChildren',
}"
>
<qz-table-column type="selection" width="45"></qz-table-column>
<qz-table-column
prop="name"
label="任务名称"
min-width="100"
show-overflow-tooltip
></qz-table-column>
<qz-table-column
prop="successTime"
label="最近成功时间"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="{ row }">{{
row.successTime || "--" | timeFormat("YYYY-MM-DD HH:mm:ss")
}}</template>
</qz-table-column>
</qz-pro-table>
</template>
<script>
export default {
data() {
return {
listParams: {
page: 1,
size: 10,
},
renderDynamic: [],
};
},
methods:{
getDataList(params) {
this.listParams.page = params.page;
this.listParams.size = params.limit;
return scanService
.getTaskList(this.filterObj, this.listParams).then((res) => {
this.renderDynamic = res.data.rows;
return res;
});
},
// 判断是不是全选
checkIsAllSelect() {
this.oneProductIsSelect = [];
this.renderDynamic.forEach((item) => {
this.oneProductIsSelect.push(item.isSelect);
});
//判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
let isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
return true == selectStatusItem;
});
return isAllSelect;
},
// 全选或者全不选
selectAllFun(selection) {
let isAllSelect = this.checkIsAllSelect();
this.renderDynamic.forEach((item) => {
item.isSelect = isAllSelect;
this.$refs.table.$refs.table.toggleRowSelection(item, !isAllSelect);
this.selectFun(selection, item);
});
},
selectFun(selection, row) {
this.setRowIsSelect(row);
},
setRowIsSelect(row) {
//当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
if (row.isSelect === "") {
row.isSelect = false;
this.$refs.table.$refs.table.toggleRowSelection(row, true);
}
row.isSelect = !row.isSelect;
//判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选
if (row.databaseSourceList && row.databaseSourceList.length > 0) {
row.databaseSourceList.forEach((item) => {
item.isSelect = row.isSelect;
this.$refs.table.$refs.table.toggleRowSelection(item, row.isSelect);
});
} else {
//操作的是子节点 1、获取父节点 2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
let parentId = row.taskId;
this.renderDynamic.forEach((item) => {
let isAllSelect = [];
if (item.id == parentId) {
item.databaseSourceList.forEach((databaseSourceListItem) => {
isAllSelect.push(databaseSourceListItem.isSelect);
});
if (
isAllSelect.every((selectItem) => {
return true == selectItem;
})
) {
item.isSelect = true;
this.$refs.table.$refs.table.toggleRowSelection(item, true);
} else if (
isAllSelect.every((selectItem) => {
return false == selectItem;
})
) {
item.isSelect = false;
this.$refs.table.$refs.table.toggleRowSelection(item, false);
} else {
item.isSelect = "";
}
}
});
}
},
// 每行多选框不确定选择
rowClassNameFun({ row }) {
if (row.isSelect === "") {
return "indeterminate";
}
},
// 表头多选框不确定选择
headerRowClassName({ row }) {
let oneProductIsSelect = [];
this.renderDynamic.forEach((item) => {
oneProductIsSelect.push(item.isSelect);
});
if (
oneProductIsSelect.includes("") ||
(oneProductIsSelect.includes(true) &&
oneProductIsSelect.includes(false))
) {
return "indeterminate";
}
return "";
},
}
}
</script>
<style lang="less" scoped>
/deep/.indeterminate {
.el-table-column--selection .cell .el-checkbox {
display: block !important;
}
.el-checkbox__input .el-checkbox__inner {
background-color: #4a97eb !important;
border-color: #4a97eb !important;
color: #fff !important;
}
}
/deep/.indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {
transform: scale(0.5);
}
/deep/.indeterminate .el-checkbox__input .el-checkbox__inner::after {
border-color: #c0c4cc !important;
background-color: #c0c4cc;
}
/deep/.indeterminate .el-checkbox__input .el-checkbox__inner::after {
content: "";
position: absolute;
display: block;
background-color: #fff;
height: 2px;
transform: scale(0.5);
left: 0;
right: 0;
top: 5px;
width: auto !important;
}
</style>
