逐级懒加载
html
<el-tree
:data="rootDate"
:props="props"
ref="tagtree"
:load="loadNode"
lazy
@node-click="handleNodeClick"
>
</el-tree>
data
根目录数据
props
绑定渲染规则
ref
注册DOM
load
绑定懒加载时间
lazy
懒加载效果
node-click
节点点击事件
Vue.js >>> data
data() {
return {
props: {
label: "tag_mc",
children: "zones",
isLeaf: "leaf",
},
//树根
rootDate: [],
//当前选择的节点参数
selectNode: {},
};
},
Vue.js >>> methods
//接口---根据id获取各节点的数据,id=0 代表获取根目录id
getTagTreeList(id) {
return new Promise((resolve, reject) => {
let data = {};
data.tag_parent_id = id;
getTagTreeList(data).then((res) => {
if (id == "0") {
this.rootDate = res.data.data;
} else {
resolve(res.data.data);
}
});
});
},
//监听节点的展开事件并进行懒加载
loadNode(node, resolve) {
//如果是根目录则加载根目录数据
if (node.level === 0) {
return resolve(this.rootDate);
}
//否则根据展开的节点id调取后台数据
this.getTagTreeList(node.data.oo_id).then((res) => {
//如果有数据返回,则通过resolve方法懒加载到相应节点
if (res) {
setTimeout(() => {
resolve(res);
}, 500);
//否则插入空的节点
} else {
return resolve([]);
}
});
},
Vue.js >>> created
created() {
//加载根目录数据
this.getTagTreeList(0);
},
局部刷新
子节点新增,修改
//id是节点的data参数,不是node参数
refreshNodeBy(id){
let node = this.$refs.tagtree.getNode(id); // 通过节点id找到对应树节点对象
node.loaded = false;
node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
}
子节点修改
//id是节点data属性的父级
this.refreshNodeBy(this.data.parent)
refreshNodeBy(id){
let node = this.$refs.tagtree.getNode(id); // 通过节点id找到对应树节点对象
node.loaded = false;
node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
}
子节点删除
*局部刷新被删除节点的父节点
//id是节点data属性的父级
this.refreshNodeBy(this.data.parent)
refreshNodeBy(id){
let node = this.$refs.tagtree.getNode(id); // 通过节点id找到对应树节点对象
node.loaded = false;
node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
}
根节点的增删改查
*重新调取一遍数据即可
this.getTagTreeList(0);