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>
相关推荐
一洽客服系统6 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead20 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端