element ui 表格组件懒加载，编辑、删除后更新数据

在做后台管理系统的时候，经常会做菜单管理功能。为了保证页面流畅性，菜单表格使用了懒加载，但是在对菜单进行添加、编辑和删除等操作的时候，发现数据没有更新。这时候，需要手动去进行触发。
思路很简单，在每一次懒加载获取子节点时，将对应的tree、node数据进行保存。在对数据进行操作之后，则手动调用获取子字节的方法来达到刷新数据的效果。
首先在组件中使用懒加载：

    <el-table
      :data="currentPageData"
      lazy
      :load="getNode"
        >
1
2
3
4
5

然后在data中进行定义：

    const data = {
    return {
      	treeNodeMap: new Map(),
      	pid: null //需要被更新子节点的节点id
		}
    }
1
2
3
4
5
6

接下来就是在调用getNode方法时存储需要的节点数据：

    getNode(tree, treeNode, resolve) {
      this.pid = tree.permissionId
      this.treeNodeMap.set(tree.permissionId, { tree, treeNode, resolve })
      resolve(子节点数据)
    }
1
2
3
4
5

当点击添加、修改、删除按钮时，需要更新一下pid，保证目标节点。
注：修改和删除时，需要用父级id来刷新数据，因此存储当前数据行的父级id为pid；
当添加的时候，需要用当前数据行id来刷新数据，因此存储当前数据行的id为pid；

    //修改
    handleEdit(row) {
      this.pid = row.parentId
    }
    //删除
    handleDel(row) {
      this.pid = row.parentId
    }
    //添加
    handleAdd(row) {
      this.pid = row.id
    }
1
2
3
4
5
6
7
8
9
10
11
12

在处理完对应操作之后，重新刷新数据即可：

handleDelete(row) {
      this.pid = row.parentId
      this.$confirm(`确认删除？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delMenu(id:row.id).then(async (res) => {
            await this.getAuthorityData()//获取到最新数据
            this.refreshData()
          })
        })
        .catch(() => {})
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    refreshData() {
      // 获取节点
      const node = this.treeNodeMap.get(this.pid)
      console.log(node, '存的node')
      // 获取需要刷新节点
      const { tree, treeNode, resolve } = node
      // 重新加载子节点数据
      this.getNode(tree, treeNode, resolve)
    },
1
2
3
4
5
6
7
8
9