element ui 懒加载树节点内子项的动态更新
程序员文章站
2022-06-08 09:13:51
...
为了保持住持之以恒的勋章,不得不在9月的最后几天内水几篇原创文章。本人是刚接触element ui,属于大白菜一颗,大神有其他方法的话,欢迎评论留言指导。
<el-tree
:props="props1"
:load="loadNode1"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props1: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
上面代码是element ui官方树懒加载的实例。实现就是添加lazy,绑定一个load属性,点击节点的时候,就会触发loadNode1的方法,将数据刷到点击的节点里面。
这里的问题是:如果该节点load过数据,再次点击是不会触发loadNode1这个方法的,但是这个节点下的子节点也许会动态增加或者删除
解决的思路是:
1、得到选中的节点
2、将选中节点的子节点全部删除
3、将选中节点的子节点数据手动刷到该节点内
我查过element ui源码,这里用到源码内的方法,所以我们实现下来很方便,只要三行代码
function refreshLazyTree(node, children) {
var theChildren = node.childNodes
theChildren.splice(0, theChildren.length)
node.doCreateChildren(children)
}
1、node就是选中的的节点(也就是点击展开的节点),你可以通过element ui里的getNode方法获得,也可以直接监听@node-click事件直接获取选中的节点。
2、children就是node这个节点的子项
3、通过splice方法删除node节点下的所有子项
4、调用doCreateChildren创建子项就ok了
上一篇: 减肥应避开什么食物 食物里的隐形脂肪