[ElemeFE/element][Feature Request] 树形表格,在数据量巨大,并且业务非常复杂(单选,多选,搜索,增减枝叶)如何处理

2024-08-19 618 views
3

公司的目前有一块的业务,牵扯到树形表格操作,

  1. 数据量本身巨大(3W条以上),
  2. 动态的增加删除,
  3. 要支持搜索
  4. 要有半选,全选的状态展示

image

因为数据量巨大,所以没办法一次性显示出来。只能做懒加载 但是懒加载又没有办法支持搜索 搜索的结果要展示完整的树形结构(所有的层级,非常重要, 与懒加载天然冲突),便于用户勾选。 同时要能在搜索的结果执行 增删,选择操作。要和未搜索时候保持同步。。

尝试过过暗杀产品经理。没有成功。o(╥﹏╥)o。

回答

0

搜索要对全表数据进行搜索。 实际上是做过滤, treeShakeing, 要展示完整结构。 不是对当前已经加载的数据筛选。

不能前端缓存数据的原因是: 数据量本身也很大,并且好多个地方都是这样的目录结构。并且后端是4个表拼成的树,牵扯动态的增删。

0

好像有个 issues 是虚拟滚动的 #17905

6

如果真的有这个功能,一切都解决了。。。。 这个破业务写的我痛苦不已。。。

0

又不能缓存后端的数据,又得搞懒加载。数据量少的时候还必须全部展开。 心情无比复杂

3

pl-table不支持树形数据。。。。

8

兄弟我也有这个问题能交流一下吗

8

现在考虑正常的树做懒加载, 搜索的情况下根据后端返回的情况判断,如果数据量不超过阈值(100条),直接展示全部,超过阈值,前端懒加载。 方案如此,做起来依然困难重重。

终极的方案还是虚拟滚动条。 留下了没技术的眼泪~~~

3

zTree 是目前为止性能最好的树组件,你可以试试;易用性和性能只能二选一,用vue注定性能低下

5

建立大量的监控对象确实有损性能。 但是在大量数据的情况下,按照 ant design 虚拟滚动条的方案,其实可以额解决方案 可以牺牲部分性能来提高开发效率。但是是一个分配的问题。

4

vue 也是有相关虚拟滚动的,你可以尝试?