el-thee懒加载删除某条数据 ，el-thee懒加载重置，el-thee革新某个节点
一、懒加载的tree已经全部睁开，外部点击删除的时候不必要重新睁开点击获取下一层数据https://i-blog.csdnimg.cn/direct/43226e7948a843028c442f089ba09525.png
<template>
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
render-after-expand
highlight-current
lazy
:expand-on-click-node="false"
@node-click="handleNodeClick"
:default-expanded-keys="defaultexpanded"
:node-key="defaultProps['id']"
:default-checked-keys="defaultchecked"
:load="loadNode">
<span class="custom-tree-node" slot-scope="{ node }">
<span v-if="node.level === 1" class="ewf-deptonelevel font16">{{
node.label
}}</span>
<span v-else class="ewf-depttwolevel">{{ node.label }}</span>
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeName: "",
treeHeight: "500px",
treeData: [],
defaultchecked: [],
defaultexpanded: ["all"],
defaultProps: {
children: "children",
label: "categoryName",
id: "iidd",
isLeaf: "leaf",
},
};
},
methods: {
// 点击的时候记录当前 点击的data 和 node
handleNodeClick(data,node) {
this.currentData = data
this.currentNode = node
},
// tree外部点击删除，并且不用初始化tree
deleteFn(){
// 删除接口调用成功的时候，再调用这个方法
this.$refs.tree.remove(this.data); // 通过节点id找到对应树节点对象
},
}
}
</script> 二、重置懒加载的tree
// 重置的时候调用这个方法
resetAllTree() {
this.node.childNodes = []
// this.node, this.resolve 在 loadNode 获取
this.loadNode(this.node, this.resolve)
},
// 页面加载完成时，elmement-ui 会默认自动调用一次
loadNode(node, resolve) {
if (node.level === 0) {
// 第一次的时候记录 node, resolve ,重置的时候需要用到
this.node = node
this.resolve = resolve
return resolve([
{
iidd: "all",
categoryName: "全部分类",
},
]);
} else if (node.level === 1) {
this.getTreeData().then((res) => {
resolve(res);
});
} else {
this.getTreeData(node).then((res) => {
resolve(res);
});
}
},
getTreeData(node) {
return new Promise((resolve, reject) => {
let params = {
sourceSystem:this.sourceSystem
}
if(node && node.data && node.data.iidd){
params.iidd = node.data.iidd
}
// 调用接口
retrieveLazyMenus(params).then((res) => {
res.data.forEach(el => {
// hasChildren 接口返回的字段，用来表示是否还有子级数据
el.leaf = !el.hasChildren
})
resolve(res.data);
});
});
}, 三、如顶部图片所示，给某一项新增子级数据，不初始化tree
// 新增的时候记录当前 点击的data 和 node
handleNodeClick(data,node) {
this.currentData = data
this.currentNode = node
},
// 调用新增接口后，然后再初始化当前节点，而不是初始化整个tree
add(){
// 获取当前节点，key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
let node = this.$refs.tree.getNode(this.currentNode.key);
//设置未进行懒加载状态
node.loaded = false;
// 重新展开节点就会间接重新触发load达到刷新效果
node.expand();
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]