实现成果
实现逻辑和代码
html代码
<el-table :data="renderDynamic" ref="product" border row-key="id" :row-class-name="rowClassNameFun" :header-row-class-name="headerRowClassName" size="mini" max-height="500px" style="width: 100%" @select="selectFun" @select-all="selectAllFun" :header-cell-style="{ background: '#fafafa' }" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column> <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
data数据
data() { return { renderDynamic: [ { id: 1, parentId: 0, date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { id: 2, parentId: 0, date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", children: [ { id: 3, parentId: 2, date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", children: [ { id: 4, parentId: 3, date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, { id: 5, parentId: 3, date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, ], }, { id: 6, parentId: 2, date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄", }, ], }, ], }; },
表格数据增加是否选中的标记
isSelect状态：true为选中状态，false为未选中状态 ，空字符串为未知状态
初始化数据
mounted() { this.initData(this.renderDynamic); },
设置标记字段
//初始化数据 initData(data) { data.forEach((item) => { item.isSelect = false; //默认为不选中 if (item.children && item.children.length) { this.initData(item.children); } }); },
复选框点击事件
selectFun(selection, row) { this.setRowIsSelect(row); },
复选框点击事件
setRowIsSelect(row) { //当点击父级点复选框时，以后的状态可能为未知状态，所以以后行状态设为false并选中，即可实现子级点全选成果 if (row.isSelect === "") { row.isSelect = false; this.$refs.product.toggleRowSelection(row, true); } row.isSelect = !row.isSelect; let that = this; function selectAllChildrens(data) { data.forEach((item) => { item.isSelect = row.isSelect; that.$refs.product.toggleRowSelection(item, row.isSelect); if (item.children && item.children.length) { selectAllChildrens(item.children); } }); } function getSelectStatus(selectStatuaArr, data) { data.forEach((childrenItem) => { selectStatuaArr.push(childrenItem.isSelect); if (childrenItem.children && childrenItem.children.length) { getSelectStatus(selectStatuaArr, childrenItem.children); } }); return selectStatuaArr; } function getLevelStatus(row) { //如果以后节点的parantId =0 并且有子节点，则为1 //如果以后节点的parantId !=0 并且子节点没有子节点 则为3 if (row.parentId == 0) { if (row.children && row.children.length) { return 1; }else{ return 4; } } else { if (!row.children || !row.children.length) { return 3; } else { return 2; } } } let result = {}; //获取明确的节点 function getExplicitNode(data,parentId) { data.forEach((item) => { if(item.id == parentId) { result = item; } if(item.children && item.children.length) { getExplicitNode(item.children,parentId); } }) return result; } function operateLastLeve(row) { //操作的是子节点 1、获取父节点 2、判断子节点选中个数，如果全副选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果局部抉择，则设为不明确状态 let selectStatuaArr = []; let item = getExplicitNode(that.renderDynamic,row.parentId); selectStatuaArr = getSelectStatus(selectStatuaArr, item.children); if ( selectStatuaArr.every((selectItem) => { return true == selectItem; }) ) { item.isSelect = true; that.$refs.product.toggleRowSelection(item, true); } else if ( selectStatuaArr.every((selectItem) => { return false == selectItem; }) ) { item.isSelect = false; that.$refs.product.toggleRowSelection(item, false); } else { item.isSelect = ""; } //则还有父级 if(item.parentId!=0) { operateLastLeve(item) } } //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则管制子级点的全选和不全选 //1、只是父级 2、既是子集，又是父级 3、只是子级 let levelSataus = getLevelStatus(row); if (levelSataus == 1) { selectAllChildrens(row.children); } else if (levelSataus == 2) { selectAllChildrens(row.children); operateLastLeve(row); } else if(levelSataus == 3) { operateLastLeve(row); } },
检测表格数据是否全选
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.product.toggleRowSelection(item, !isAllSelect); this.selectFun(selection, item); }); },
表格行款式 当以后行的状态为不明确状态时，增加款式，使其复选框为不明确状态款式
rowClassNameFun({ row }) { if (row.isSelect === "") { return "indeterminate"; } },
表格题目款式 当一级目录有为不明确状态时，增加款式，使其全选复选框为不明确状态款式
headerRowClassName({ row }) { let oneProductIsSelect = []; this.renderDynamic.forEach((item) => { oneProductIsSelect.push(item.isSelect); }); if (oneProductIsSelect.includes("")) { return "indeterminate"; } return ""; },
更改复选框款式代码
.indeterminate .el-checkbox__input .el-checkbox__inner { background-color: #409eff !important; border-color: #409eff !important; color: #fff !important;}.indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after { transform: scale(0.5);}.indeterminate .el-checkbox__input .el-checkbox__inner { background-color: #f2f6fc; border-color: #dcdfe6;}.indeterminate .el-checkbox__input .el-checkbox__inner::after { border-color: #c0c4cc !important; background-color: #c0c4cc;}.product-show th .el-checkbox__inner { display: none !important;}.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;}.product-show .el-checkbox__inner { display: block !important;}.product-show .el-checkbox { display: block !important;}