element-plus 树形表格懒加载时, 节点数据更新问题?

问题描述: 当前是一个无限层级的树形表格, 当删除或编辑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)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设后端返回的数据格式如下: ```json { "id": 1, "name": "Parent Node", "children": [ { "id": 2, "name": "Child Node 1", "children": [] }, { "id": 3, "name": "Child Node 2", "children": [ { "id": 4, "name": "Grandchild Node 1", "children": [] } ] } ] } ``` 可以先定义一个递归函数,将数据转化为 element-plus 树形表格所需的格式: ```javascript function transformData(data) { return data.map(item => { const { id, name, children } = item const node = { id, name, children: [] } if (children && children.length > 0) { node.children = transformData(children) } return node }) } ``` 然后在 Vue 组件中调用该函数,并将结果赋值给 treeData 属性: ```vue <template> <el-table-tree-column :props="treeProps" :data="treeData" border> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="Name" prop="name"></el-table-column> </el-table-tree-column> </template> <script> export default { data() { return { treeData: [] } }, computed: { treeProps() { return { children: 'children', hasChildren: node => node.children && node.children.length > 0 } } }, methods: { fetchData() { // 发起 API 请求,获取数据 // 假设数据存储在 response.data 中 const response = await fetch('/api/tree') const data = await response.json() // 转化数据格式 this.treeData = transformData(data) } }, mounted() { this.fetchData() } } </script> ``` 注意:需要引入 `el-table-tree-column` 组件,并在 `treeProps` 中指定树形结构的属性名称。在上面的例子中,我们指定了 `children` 作为树形结构的属性。同,在 `el-table-column` 组件中,需要指定展示的列。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值