el-thee懒加载删除某条数据 ，el-thee懒加载重置，el-thee刷新某个节点

 一、懒加载的tree已经全部展开，外部点击删除的时候不需要重新展开点击获取下一层数据

<template>
<el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              render-after-expand
              highlight-current
              lazy
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :default-expanded-keys="defaultexpanded"
              :node-key="defaultProps['id']"
              :default-checked-keys="defaultchecked"
              :load="loadNode">
              <span class="custom-tree-node" slot-scope="{ node }">
                <span v-if="node.level === 1" class="ewf-deptonelevel font16">{{
                  node.label
                }}</span>
                <span v-else class="ewf-depttwolevel">{{ node.label }}</span>
              </span>
            </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeName: "",
      treeHeight: "500px",
      treeData: [],
      defaultchecked: [],
      defaultexpanded: ["all"],
      defaultProps: {
        children: "children",
        label: "categoryName",
        id: "iidd",
        isLeaf: "leaf",
      },
    };
  },

  methods: {
    // 点击的时候记录当前 点击的data 和 node
    handleNodeClick(data,node) {
      this.currentData = data
      this.currentNode = node
    },
    
    // tree外部点击删除，并且不用初始化tree
    deleteFn(){
      // 删除接口调用成功的时候，再调用这个方法
      this.$refs.tree.remove(this.data); // 通过节点id找到对应树节点对象
    },
 }   
}
</script>

二、重置懒加载的tree

    // 重置的时候调用这个方法
    resetAllTree() {
      this.node.childNodes = []
      // this.node, this.resolve 在 loadNode 获取
      this.loadNode(this.node, this.resolve)
    },

   

    // 页面加载完成时，elmement-ui 会默认自动调用一次
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 第一次的时候记录 node, resolve ,重置的时候需要用到
        this.node = node
        this.resolve = resolve
        return resolve([
          {
            iidd: "all",
            categoryName: "全部分类",
          },
        ]);
      } else if (node.level === 1) {
        this.getTreeData().then((res) => {
          resolve(res);
        });
      } else {
        this.getTreeData(node).then((res) => {
          resolve(res);
        });
      }
    },

 getTreeData(node) {
      return new Promise((resolve, reject) => {
        let params = {
          sourceSystem:this.sourceSystem
        }
        if(node && node.data && node.data.iidd){
          params.iidd = node.data.iidd
        }
        // 调用接口
        retrieveLazyMenus(params).then((res) => {
          res.data.forEach(el => {
            // hasChildren 接口返回的字段，用来表示是否还有子级数据
            el.leaf = !el.hasChildren
          })
          resolve(res.data);
        });
      });
    },

三、如顶部图片所示，给某一项新增子级数据，不初始化tree

    // 新增的时候记录当前 点击的data 和 node
    handleNodeClick(data,node) {
      this.currentData = data
      this.currentNode = node
    },

    // 调用新增接口后，然后再初始化当前节点，而不是初始化整个tree
    add(){
      // 获取当前节点，key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.key
      let node = this.$refs.tree.getNode(this.currentNode.key);
      //  设置未进行懒加载状态
      node.loaded = false;
      // 重新展开节点就会间接重新触发load达到刷新效果
      node.expand();
 
    }

原文地址：https://blog.csdn.net/weixin_47756693/article/details/144349527

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！