如何获取懒加载后的el-爱代码爱编程
如何获取懒加载后的el-tree全部数据
场景：使用element-ui的el-tree的懒加载模式，在数据懒加载形成树形结构后，要求获取整个树的数据（treeList），el-tree的懒加载是不绑定data，此时是没法拿到实际的树的数据。
解决方案一：自己定义一个存在树形数据的数组treeList，在每次懒加载的relsove的时候，把对应的数据也存treeList数组中，就是拿到懒加载数据，放在treeList对应的children里。
该方案最终肯定是能拿到el-tree树形数据,但是如果涉及到el-tree的排序、删除、更新字段等操作，就需要处理对应的treeList的数据，对el-tree的任何操作就得写对应数据的操作。对于高手肯定不怕，我这种小白就不想写太多的数据操作逻辑，所有提供方案二。
解决方案二：根据懒加载生成的dom树，反推出树形结构的数据。
1、先看下懒加载的el-tree的dom结构，el-tree是整个树，el-tree-node是树的一个节点，el-tree-node里面有el-tree-node__content和el-tree-node__children。el-tree-node__content是显示节点的名称等信息，el-tree-node__children就是该节点的子节点。这不就是典型的树形结构的展示行书。
2、使用el-tree的插槽，通过插槽动态绑定唯一键id,
<el-tree :props="props" :load="loadNode" lazy >
<div class="custom-tree-node" slot-scope="{ node }" :id="node.data.id">
{{ node.label + "33" }}
</div>
</el-tree>在dom上就对应el-tree-node__content里面的元素的属性。
因此可以通过el-tree-node__content获取基本的数据信息，通过el-tree-node__children获取每个子节点的信息。想必到这里，就知道后面要怎么实现了，就是for循环加递归遍历dom节点，生成对应的树数据。
贴完整示例代码
<template>
<div class="box-item-num">
<el-tree :props="props" :load="loadNode" lazy >
<div class="custom-tree-node" slot-scope="{ node }" :id="node.data.id">
{{ node.label + "33" }}
</div>
</el-tree>
<el-button @click="forDiGui">获取懒加载树数据</el-button>
</div>
</template>
<script>
export default {
data() {
return {
props: {
children: 'children',
label: 'label'
},
treeDataArr: [],
};
},
methods: {
forDiGui() {
let fristTreeItem = document.querySelector(".el-tree").children;
let treeDataArr = [];
//递归for循环
const forEachDeep=(treeItemArr,treeDataArr)=>{
let arr = Array.from(treeItemArr);
arr.forEach((treeItem) => {
let treedataObj = {};
if (treeItem.classList.contains("el-tree-node")) {
treedataObj = this.getbasicIndo(treeItem.children[0]);
if (
treeItem.lastChild &&
treeItem.lastChild.classList &&
treeItem.lastChild.classList.contains("el-tree-node__children")
) {
let grouptreeItem = treeItem.lastChild.children;
forEachDeep(grouptreeItem, treedataObj.children);
}
}
if (treedataObj.name) {
treeDataArr.push(treedataObj);
}
});
}
forEachDeep(fristTreeItem, treeDataArr);
console.log("treeDataArr", treeDataArr);
},
//获取基本节点信息
getbasicIndo(nodeContent) {
let nodeContentData = {
name: nodeContent.lastChild.textContent, //
id: nodeContent.lastChild.id,
children: [],
};
// console.log(nodeContentData, "nodeContentData");
return nodeContentData;
},
loadNode(node, resolve) {
setTimeout(() => {
if (node.level === 0) {
return resolve([{ id: 2, label: "节点1-1", leaf: false }]);
} else {
return resolve([{ id: node.data.id + '1', label: node.data.label + '-' + (node.level - 1), leaf: node.data.leaf }]);
}
}, 1000);
},
},
};
</script>