使用element table 时发现如果勾选有异步的话就无法勾选子集 然后测试就提了bug给我
我在网上找了很多资料 试了以后还是不完美 有小问题 我就自己研究了下 改进了下
网上找的有勾选父节点 点击展开以后子节点没有勾选的问题 等等 我这个就解决异步展开勾选的问题
html部分
<template>
<div>
<el-table :data="tableData" style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@select-all="selectAll"
@selection-change="handleSelectionChange"
@select="selectRow"
ref="multipleTable">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
tableData: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
hasChildren: true,
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
multipleSelection: [],
};
},
mounted() {},
created() {},
methods: {
load(tree, treeNode, resolve) {
const table = this.$refs["multipleTable"];
setTimeout(() => {
const data = [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
];
tree.children = data;//获取数据后自己往父节点加数据
resolve(data);//虽然下面一步会把数据加进去但是会在一直在加载中 所以就重复加载数据了
this.$set(//更新table内部的数据 不这样的话勾选父节点以后子节点还是不能勾选 就很奇怪
table.store.states.lazyTreeNodeMap,
tree.supplierID, //父节点id
tree.children //新数组
);
// 这里判断当前父节点是否有被勾选
let dt = this.multipleSelection.find((m) => {
return m.id == tree.id;
});
this.setChildren(tree.children, dt ? true : false);
}, 1000);
},
setChildren(children, type) {
// 编辑多个子层级
children.map((j) => {
this.toggleSelection(j, type);
if (j.children) {
this.setChildren(j.children, type);
}
});
},
// 选中父节点时,子节点一起选中取消
async selectRow(selection, row) {
const hasSelect = selection.some((el) => {
return row.id === el.id;
});
if (hasSelect) {
if (row.children) {
// 解决子组件没有被勾选到
this.setChildren(row.children, true);
}
} else {
if (row.children) {
this.setChildren(row.children, false);
}
}
},
// 选择全部
selectAll(selection) {
// tabledata第一层只要有在selection里面就是全选
const isSelect = selection.some((el) => {
const tableDataIds = this.tableData.map((j) => j.id);
return tableDataIds.includes(el.id);
});
// tableDate第一层只要有不在selection里面就是全不选
const isCancel = !this.tableData.every((el) => {
const selectIds = selection.map((j) => j.id);
return selectIds.includes(el.id);
});
if (isSelect) {
selection.map((el) => {
if (el.children) {
// 解决子组件没有被勾选到
this.setChildren(el.children, true);
}
});
}
if (isCancel) {
this.tableData.map((el) => {
if (el.children) {
// 解决子组件没有被勾选到
this.setChildren(el.children, false);
}
});
}
},
toggleSelection(row, select) {
if (row) {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(row, select);
});
}
},
handleSelectionChange(selection) {
this.multipleSelection = selection;
},
},
};
</script>
到这里就结束啦 有问题可以提出来