vue3 + elementPlus el-table 树形数据懒加载，子节点删除或者修改，表格不更新的问题

背景

使用 vue3 + elementPlus 做了一个树形表格，数据是懒加载的，发现删除子节点，页面不刷新。即使重新获取表格数据，一层一层展开，子节点还是存在，怀疑是缓存的问题。

网上查询后，发现有一个属性，可以获取树形表格缓存的数据，打印看一下。

缓存数据打印

发现即使是树形的表格，缓存数据进行存储的时候，跟普通的树形数据不一样。

理应呈现的是 A:{ B:[ { C } } ] 这样的结构，但是在这个映射里面呈现的却是 {A:[ B:[], C:[] ], E:[ F:[], G:[] ]} ，等于里面用父级 id 来储存它的下级数据。

这也是为什么表格上会需要一个 row-key 属性，来为每条数据绑定一个独一无二字段的原因。

在删除某个子节点的时候，可以调用下边的方法

const refreshTableCache = (row) => {
  // tableRef是el-table的ref
  let parentList = tableRef.value.store.states.lazyTreeNodeMap.value[row.parentId] // 获取父节点下缓存的子节点数组

  tableRef.value.store.states.lazyTreeNodeMap.value[row.parentId].splice(
    parentList.findIndex((item) => item.deptId === row.deptId),
    1
  ) // 删除子节点
}

提示

lazyTreeNodeMap 可以拿到所有的懒加载数据的映射，上边代码因为我是删除功能，直接删除操作，如果是更新操作，直接修改对应的数据就可以改变表格。