el-table树形懒加载表格展开后 子节点修改数据后实时刷新

问题描述

在项目中遇到一个关于el-table的懒加载树型结构修改数据后需要刷新数据的问题，需要手动刷新页面之后才能刷新

问题解决：

1.首先创建map来用于存取数据，

const loadMap = new Map(); // 存储load加载的子节点 以能够编辑后更新

2.在table展开子节点时，用map存下每次被加载的父节点

注意：当子节点只剩下最后一个时，删除后会没有变化，这时需要进行处理，获取el-table绑定的ref的值，设置 tableRef.value.store.states.lazyTreeNodeMap.value[row.softwareId] = []

const load = (
  row: DataItem,
  treeNode: unknown,
  resolve: (date: DataItem[]) => void
) => {
  loadMap.set(row.id, { row, treeNode, resolve });
  let params = {
    id: row.id
  }
  getData(params).then(res => {
    resolve(res.data)
    // 当子集删除最后一条数据时，需要单独进行处理。判断返回的数据是否为空，为空时手动置空。
    if (res.data.length === 0) {
      tableRef.value.store.states.lazyTreeNodeMap.value[row.id] = []
    }
  })
}

3.在子节点增删改时都调用一下

const fresh = (id) => {
  if (id) {
    // 编辑/删除 展开的子节点
    if (loadMap.get(id)) {
      const { row, treeNode, resolve } = loadMap.get(id);
      load(row, treeNode, resolve)
    } else {
      // 新增根节点下的第一级子节点
      getTableData()
    }
  } else {
    getTableData()
  }
}

4.这里要注意的是，如果子节点增删改后，如果父节点的内容也要实时同步刷新，则需要更新loadMap里存储的父节点的内容

记住把父节点id保存一下，增删改后，把父节点id传过来,再调用freshLoadMap即可

 <AddDialog ref="addDialogRef" @fresh="fresh" @freshLoadMap="freshLoadMap" />

const edit = (row) => {
  addDialogRef.value.setParentId(row.parentSoftwareId || "") // 这里把父节点id保存一下
  addDialogRef.value.open(row, true)
}

const freshLoadMap = async (id) => {
  const res = await getData()
  tableData.value = res.data
  const newItem = res.data.filter(item => item.id=== id)[0]
  const { row, treeNode, resolve } = loadMap.get(id);
  // 替换 loadMap 对应 id 的 row
  load(newItem, treeNode, resolve)
}

子组件：

const emit = defineEmits(["freshLoadMap"]);
const parentSoftwareId = ref()
const setParentId = (id) => {
  parentSoftwareId.value = id
}

const submit = () => {
...调用接口成功后
emit('freshLoadMap', parentSoftwareId.value)
}

知识补充：
Map对象：
1.Map是用来存键值对的数据，它与Object不同在于：

• Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，JS解释器会自动将其转换为字符串
• Map中任何类型的值都可以成为数据的key

2.创建Map对象

const map = new Map()

map.set("key", "value")


map.delete(key)

console.log(map.get("key"))   //value
console.log(map.has("key"))  //ture or false

3.常用方法介绍

map.size() 获取map中键值对的数量
map.set(key, value) 向map中添加键值对
map.get(key) 根据key获取值
map.delete(key) 删除指定数据
map.has(key) 检查map中是否包含指定键
map.clear() 删除全部的键值对
map.keys() 获取map的所有的key
map.values() 获取map的所有的value

4.Map转数组

// 方法一：
const arr = Array.from(map) // [["name","孙悟空"],["age",18]]
// 方法二：
const arr = [...map]

参考借鉴于：Map对象及常用方法介绍