vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格，不过呢，wo遇到一个新的需求，其中就是要实现树形表格和复选框的结合，尝试过很多方法，最后自己总结出一套，实现了全选，单选，多选。
效果图：
代码部分
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
row-key="domainId"
:default-expand-all="true"
:tree-props="{
hasChildren: 'hasChildren',
children: 'domainInfoLists',
}"
>
<el-table-column width="105">
<template slot="header" slot-scope="scope">
<el-checkbox
v-model="checkouts"
style="padding-left: 10px"
@change="checkAllIn(scope)"
/>
</template>
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.checks"
style="padding-left: 10px"
@change="checkChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableList"
:key="index + 'a'"
:label="item.label"
:prop="item.prop"
align="right"
></el-table-column>
</el-table>
searchMap: {
},
type: 0,
quDataValue: "A",
queryType: 0,
queryValue: "A",
tableData: [],
domainInfoLists: [],
mapData: [],
haschild: true,
checkouts: false,
tableList: [
{
label: "",
prop: "domain",
},
{
label: "主机记录",
prop: "hostRecord",
},
.........
]
//总全选
checkAllIn() {
this.$refs.multipleTable.data.map((items) => {
this.$set(items, "checks", this.checkouts);
if (items.domainInfoLists) {
items.domainInfoLists.forEach((item) => {
this.$set(item, "checks", this.checkouts);
this.mag = this.checkouts;
});
}
});
},
//插槽复选框逻辑
checkChange(row) {
// 父选子
this.searchMap.domainInfoIds = [];
if (row.domainInfoLists) {
if (row.checks) {
row.domainInfoLists.map((item) => {
this.$set(item, "checks", true);
});
this.$set(row, "checks", true);
this.mag = true;
} else {
row.domainInfoLists.map((item) => {
this.$set(item, "checks", false);
});
this.$set(row, "checks", false);
}
}
// 子带父
this.mapData = [];
this.tableData.map((items) => {
let sonData = [];
items.domainInfoLists.map((val) => {
if (val.checks === true) {
this.mag = true;
sonData.push(val);
this.searchMap.domainInfoIds.push(val.domainId);
if (sonData.length === items.domainInfoLists.length) {
this.$set(items, "checks", true);
if (items.checks) {
this.mag = true;
this.mapData.push(items);
if (this.mapData.length === this.tableData.length) {
this.checkouts = true;
}
}
}
}
});
});
//子空父空
if (!row.checks) {
this.checkouts = false;
this.tableData.map((ite) => {
if (ite.domainInfoLists) {
ite.domainInfoLists.map((items) => {
if (!items.checks) {
this.$set(ite, "checks", false);
}
});
}
});
this.tableData.every((ite) => {
if (ite.domainInfoLists) {
ite.domainInfoLists.every((items) => {
if (!items.checks) {
this.mag = false;
}
});
}
});
}
},
如果大家有更好的方法，欢迎指教！！！！！