用于el-tree懒加载一个图层目录,勾选父级目录,需要得到该父级目录下所有叶子节点数据
<el-tree
:data="directoryDataLayer"
show-checkbox
node-key="id"
:load="directoryDataLoad"
lazy
ref="dataLayersCom"
:props="treeStructure"
@check="dataTreeFun"
:show-checkbox="true"
>
<span slot-scope="{node,data}" class="poup_tree_item">{{ data.name }}</span>
</el-tree>
dataTreeFun(nodeData) {
let node = this.$refs.dataLayersCom.getNode(nodeData.id);
if (node.checked && !node.expanded && !node.isLeaf) {
// 如果节点已勾选且未展开,并且不是叶子节点,展开节点,并在展开后勾选所有子节点
node.expand(async () => {
await this.expandAndCheckChildren(node);
this.updateLayers();
});
} else if (node.checked) {
// 节点已勾选且已展开,直接勾选所有子节点
this.expandAndCheckChildren(node).then(() => {
this.updateLayers();
});
} else if (!node.checked) {
// 节点未勾选,取消勾选所有子节点
this.$refs.dataLayersCom.setChecked(node.data.id, false);
this.updateLayers();
}
},
async expandAndCheckChildren(node) {
// 如果节点不是叶子节点且子节点未加载,则加载子节点
if (!node.isLeaf && node.childNodes.length === 0) {
await new Promise((resolve) => {
node.expand(() => {
resolve();
});
});
}
// 勾选所有子节点
for (const child of node.childNodes) {
this.$refs.dataLayersCom.setChecked(child.data.id, true);
if (!child.isLeaf) {
await this.expandAndCheckChildren(child);
}
}
},
// 获取所有勾选的节点
updateLayers() {
const checkedNodes = this.$refs.dataLayersCom.getCheckedNodes();
const processedGood = checkedNodes.filter(item => item.tree_type === "data");
const getKey = processedGood.map(item => item.id);
const getDataArr = processedGood.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {})
console.log(getKey, getDataArr)
},