Element-UI操作树组件懒加载模式下进行节点更新

最近某个项目中有一个树组件需求：点击项目节点展开子项目+作业，点击项目节点后面小图标只展示作业这样一个要求。
同时，因为数据库数据过大情况，在本系统中树组件全都是懒加载模式

参考

  loadOrgNode(node, resolve) {
      console.log(node.level, "level");
      // 加载 树数据
      let that = this;

      if (node.level === 0) {
        setTimeout(() => {
          that.loadtreeData(resolve);
        }, 0);
      }

      if (node.level >= 1) {
        console.log(node.level, "二级节点");
        console.log(node);
        this.getChildByList(node.data, resolve);
        return resolve([]); // 防止在该节点没有子节点时一直转圈的问题发生。
      }
    },

问题在于懒加载的性能特性，导致如果某节点已经展开过，将不再进行二次加载。与该系统需求矛盾。
所以解决方案是有些许破坏了懒加载的格式，但是体验良好的。
给点击的节点childNodes做一个更新操作

 //更新节点
    handleUpdateNode(data,node) {
      event.stopPropagation()  //防止激发展开节点事件
      node.loaded = false;  //将该节点的loaded置为false 即告诉它，你未加载
      node.loadData();  //手动加载该节点
      node.expanded =!node.expanded;  //让节点再次展开，本次已经是要呈现的新数据了
    },

成果

总结

简单实用，不需要大改动，很巧的螺丝。
学了不等于会用，修改系统bug是对照前辈的代码，同理解决不了的问题要解决还是得对接源码。