懒加载的el-table在增加、修改、删除后，实现数据刷新

最新推荐文章于 2024-07-21 21:41:29 发布

依赖_赖

最新推荐文章于 2024-07-21 21:41:29 发布

阅读量6.8k

点赞数 5

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_39150852/article/details/113727283

版权

vue 专栏收录该内容

43 篇文章 2 订阅

订阅专栏

1.加载根节点数据
在这里插入图片描述

2.实现数据懒加载
el-table增加参数

    lazy
	:load="tableLoad"
	:tree-props="{ children: 'children', hasChildren: 'hasChild' }"

3.编辑和新增节点时刷新数据
a. 定义maps变量： maps: new Map()
b. 加载子节点时赋值：
在这里插入图片描述
c. 编辑或新增成功时赋值，并调用刷新函数：

    //编辑或新增
    tableEditClick (row, type) {
      //调用编辑或新增方法
      //...
      this.rowID = row.id;
      this.parentID = row.parentId;
    },

   //刷新数据
    dialogSubmit () {
      //懒加载刷新当前级
      const currentId = this.rowID;
      if (currentId && this.maps.get(currentId)) {
        const { row, treeNode, resolve } = this.maps.get(currentId);
        this.tableLoad(row, treeNode, resolve);
      }
      //懒加载刷新父级
      const parentId = this.parentID;
      if (parentId && this.maps.get(parentId)) {
        const { row, treeNode, resolve } = this.maps.get(parentId);
        this.tableLoad(row, treeNode, resolve);
      }
      //刷新根节点
      if (!this.maps.get(parentId) && !this.maps.get(currentId)) {
        //加载根节点数据
        //...
      }
    }

d. 删除时刷新父节点：

   tableDeleteClick (curRow) {
      this.$confirm('此操作将永久删除该字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(()=>{
        //调用删除方法
        //...
        if (curRow.parentId) {
              const { row, treeNode, resolve } = this.maps.get(curRow.parentId); //根据父级id取出对应的节点数据
              //将对应父节点下的数据清空，需要在el-table中增加参数 `ref="table"`
              this.$set(this.$refs.table.store.states.lazyTreeNodeMap, row.id, []);
              //实现数据的重新加载
              this.tableLoad(row, treeNode, resolve);
            } else {//刷新根节点
              //加载根节点数据
              //...
            }
      });
    },