问题描述
在项目中遇到一个关于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对象及常用方法介绍