elementui table子级tree懒加载bug

  1. 删除子级刷新列表子级依然显示

2.更新状态子级列表未刷新

3.编辑子级后刷新页面显示状态未变更

el-table 树表格load源码

首先,load可以执行,但是只剩一个子节点就有问题,那么就直接可以定位bug在load方法里:

文件路径:element-plus\packages\components\table\src\store\tree.ts

const loadData = (row: T, key: string, treeNode) => {

const { load } = instance.props as unknown as TableProps<T>

if (load && !treeData.value[key].loaded) {

treeData.value[key].loading = true

load(row, treeNode, (data) => {

if (!Array.isArray(data)) {

throw new TypeError('[ElTable] data must be an array')

}

treeData.value[key].loading = false

treeData.value[key].loaded = true

treeData.value[key].expanded = true

// 就是这里,我们的子节点删完了data.length == 0,无法赋值

if (data.length) {

lazyTreeNodeMap.value[key] = data

}

instance.emit('expand-change', row, true)

})

}

}

增加方法手动刷新子级数据

// 刷新时

const refreshChild = (parentId) => {

if (rowMaps.get(parentId)) {

const { tree, treeNode, resolve } = rowMaps.get(parentId);

handleLoadTableChild(tree, treeNode, resolve);

} else {

sysTemp.value.getTableData();

}

};

// 先new一个map用于数据保存

const rowMaps = reactive(new Map());

load加载时存储父级id及数据信息

rowMaps.set(tree.id, { tree, treeNode, resolve });

相关推荐
ZC跨境爬虫21 小时前
跟着 MDN 学 HTML day_32:(AbstractRange 抽象接口与 DOM 范围操作)
前端·javascript·ui·html·音视频
十子木21 小时前
设置把所有终端移动到最前端的快捷键
前端
陈老老老板21 小时前
Bright Data Web Scraping 实战:用 MCP + Dify 构建 eBay 商品详情采集 AI 工作流(2026)
前端·人工智能
一渊之隔21 小时前
uniapp蓝牙搜索连接展示蓝牙设备包含信号显示
前端·网络·uni-app·bluetooth
Cisyam^21 小时前
Bright Data Web Scraper 实战:构建 TikTok 与 LinkedIn Web Scraping 自动化 Skill(2026)
运维·前端·自动化
李剑一21 小时前
开箱即用!Vue3+TS 视频组件完整代码,自动提取视频第一帧做封面。妈妈再也不用担心我手动截封面了
前端
盐多碧咸。。1 天前
echarts折线图矩形选择 框选图表
前端·javascript·echarts
羽沢311 天前
Canvas学习一
前端·css·学习·canvas
KaMeidebaby1 天前
卡梅德生物技术快报|锦葵科植物遗传转化工程化优化:棉花胚尖农杆菌转化体系参数固化与效率提升
前端
invicinble1 天前
前端框架使用vue-cli( 第二层:工程配置层--4.axios需要做的基础配置)
前端·vue.js·前端框架