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

},

完整案例代码(没和后端交互)

复制代码
<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>
相关推荐
程序员NEO3 分钟前
3分钟搞定Vue组件库
前端
程序员NEO7 分钟前
WebStorm代码一键美化
前端
前端农民工ws31 分钟前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
昔人'40 分钟前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
百思可瑞教育1 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
IT_陈寒1 小时前
Python 3.12 新特性实战:10个性能优化技巧让你的代码快如闪电⚡
前端·人工智能·后端
Wiktok1 小时前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
冲!!2 小时前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
星语卿2 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js