问题描述: 当前是一个无限层级的树形表格, 当删除或编辑test-0001时我期望仅更新test下面的所有子节点而不是刷新页面。
推荐方法:通过查看element-plus 源码, 发现可通过ref 手动去修改节点的值,参考如下写法:
// row.id 为需要更新数据的父级id(element-plus表格绑定属性rowKey='id'对应)
// _resData 为父级下面的所有子集数据(test节点下的所有子节点)
tableRef.value.ElTableInstance.store.states.lazyTreeNodeMap.value[row.id] = _resData;
tableRef.value.ElTableInstance.store.states.treeData.value[row.id].expanded = true;
方法二: 保存每次请求的resolve实例, 当子节点数据改变时, 手动触发resolve更新(这种更新方式存在问题, 清空所有子集时不生效)如何不存在删除操作时可使该方法
// 记录所有子节点请求实例
const resolveObj = new Map();
/**动态加载数据 */
const onLoadTree = async (row: IAnyObject, treeNode?: any, resolve?: (date: IAnyObject[]) => void) => {
resolveObj.set(row.id, resolve)
const res = (await areaChildenList({ parentCode: row.code })) as IAnyObject[];
resolve(res)
};
/*手动更新调用方法 row为当前编辑节点的父节点*/
onLoadTree(row, null, resolveObj.get(row.id)