el-tree 懒加载数据，增删改时局部刷新实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-tree 懒加载数据，增删改时局部刷新实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.数据过多时进行懒加载孩子节点，根据层级传参获取后端孩子数据

懒加载主要部分：

1参数:

        :load="loadNode"

         lazy

        :props="defaultProps"

2.defaultProps 需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表

      defaultProps: {

children: 'children',

label: 'label',

isLeaf: 'isLeaf'

},

2.增删改时实现局部刷新

主要思路：将展开的层级的node保存当curNode中，在进行添加刷新后调用partialRefreshpartialRefresh（）方法【下面代码】

partialRefreshpartialRefresh (node) {
this.mark = true
node.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的
的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
},

完整案例代码（没和后端交互）文章来源地址https://www.toymoban.com/news/detail-632030.html

<template>
  <div>
    树形懒加载 
    局部刷新:添加或者删除节点时,后端需要返回当前节点下的最新的孩子数据
   <el-tree
   :props="defaultProps"
   :data="data"
   :load="loadNode"
    lazy
    :expand-on-click-node="false"
    :check-on-click-node="true"
    @node-click="nodeClick"
  >
 
</el-tree>
 <el-button @click="add">添加局部数据</el-button>
 <el-button @click="deletes">删除局部刷新</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nodeArr:[],
        mark:false,
        delete:false,
        curPath:'',
        curNode:'',
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'isLeaf'
        },
        data: [{
          label: '一级 1',
          filedId:'dddd',
          children:[{}]
        
        }, {
          label: '一级 2',
          children:[{}]
        
          }, {
            label: '二级 2-2',
            children:[{}]
          }],
      };
    },
    methods: {
      // 模拟删除
      deletes() {
        this.delete=true
       this.partialRefreshpartialRefresh(this.curNode)
      },
      // 模拟添加数据,
      add() {
          this.partialRefreshpartialRefresh(this.curNode)
      },

      nodeClick (data, node) {
        console.log('node',node);
        this.curNode = node
      },
      // 删除

      // 实现局部刷新，在点击弹窗处调用的
    partialRefreshpartialRefresh (node) {
      this.mark = true
      node.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
      node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的 
        的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
    },
    loadNode(node, resolve) {
        console.log('nodexx',node);
        
        this.curNode = node
        if (node.level === 0) {
          return resolve(this.data);
        }
        if (node.level >= 1) {
          // 设置定时器模拟接口返回孩子数据
          setTimeout(() => {
          node.data.children.pop();
          node.data.children = []
          // 模拟添加的
          // if(this.mark) {
          //   // 模拟添加数据，真正开发应该是后端将当前节点孩子数据返回
          //   node.data.children.push(
          //   {
          //   label: '新添加的孩子',
          //   filedId:'wwww',
          //   isLeaf:true,
          // },
          // {
          //   label: '初始的孩子',
          //   filedId:'wwww',
          //   isLeaf:true,
          // },
          // {
          //   label: '二级 3-2',
          //   filedId:'wwww',
          //   children:[{}]
          // })
          // } else {
          // node.data.children.pop();
          // node.data.children.push({
          //   label: '初始的孩子',
          //   filedId:'wwww',
          //   isLeaf:true,
          // },
          // {
          //   label: '二级 3-2',
          //   filedId:'wwww',
          //   children:[{}]
          // })
          // }
          // 模拟删除
            if(this.delete) {
            // 模拟删除数据，真正开发应该是后端将当前节点孩子数据返回
            node.data.children.push(
          //   {
          //   label: '新添加的孩子',
          //   filedId:'wwww',
          //   isLeaf:true,
          // },
          // {
          //   label: '初始的孩子',
          //   filedId:'wwww',
          //   isLeaf:true,
          // },
          {
            label: '二级 3-2',
            filedId:'wwww',
            children:[{}]
          })
          } else {
          node.data.children.pop();
          node.data.children.push({
            label: '初始的孩子',
            filedId:'wwww',
            isLeaf:true,
          },
          {
            label: '二级 3-2',
            filedId:'wwww',
            children:[{}]
          })
          }
          resolve(node.data.children)
          },3000)
        }
     
      }
    }
  };
</script>

<style>

</style>

到了这里，关于el-tree 懒加载数据，增删改时局部刷新实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！