el-tree(element-ui)逐级懒加载，及局部刷新

逐级懒加载

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);