vxe-table
vxe-table copied to clipboard
树表格数据量达到1万条之后,展开全部特别慢,卡顿,渲染不出等问题
可复现的链接:
https://codesandbox.io/embed/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-o0u2c2?fontsize=14&hidenavigation=1&theme=dark
问题描述与截图:
##树表格数据量达到1万条之后,展开全部特别慢,卡顿,渲染不出等问题 ###调试中发现是在如下函数有问题,处理数据很慢
/**
* 如果为虚拟树,将树结构拍平
* @returns
*/
const handleVirtualTreeToList = () => {
const { treeConfig } = props
const { treeExpandeds } = reactData
const treeOpts = computeTreeOpts.value
if (treeConfig && treeOpts.transform) {
const fullData: any[] = []
const expandMaps: Map<any, number> = new Map()
> XEUtils.eachTree(internalData.afterTreeFullData, (row, index, items, path, parent) => {
> if (!parent || (expandMaps.has(parent) && $xetable.findRowIndexOf(treeExpandeds, parent) > -1)) {
> expandMaps.set(row, 1)
> fullData.push(row)
> }
> }, { children: treeOpts.mapChildren })
internalData.afterFullData = fullData
updateScrollYStatus(fullData)
return fullData
}
return internalData.afterFullData
}
期望的结果:
期望优化性能
操作系统:
win10
浏览器版本:
Google Chrome 版本 96.0.4664.45(正式版本) (64 位)
vue 版本:
"vue": "^3.2.47",
vxe-table 版本:
vxe-table 4.3.11 "xe-utils": "^3.5.7"