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

为了保持住持之以恒的勋章，不得不在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了