element ui 懒加载树节点内子项的动态更新

本文主要是介绍element ui 懒加载树节点内子项的动态更新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

为了保持住持之以恒的勋章，不得不在9月的最后几天内水几篇原创文章。本人是刚接触element ui，属于大白菜一颗，大神有其他方法的话，欢迎评论留言指导。

 

<el-tree:props="props1":load="loadNode1"lazyshow-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.childNodestheChildren.splice(0, theChildren.length)node.doCreateChildren(children)
}

1、node就是选中的的节点（也就是点击展开的节点），你可以通过element ui里的getNode方法获得，也可以直接监听@node-click事件直接获取选中的节点。

2、children就是node这个节点的子项

3、通过splice方法删除node节点下的所有子项

4、调用doCreateChildren创建子项就ok了

这篇关于element ui 懒加载树节点内子项的动态更新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---