社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
当面临一个树结构的时候,一般首先考虑用 tree 组件,但是,这里显然是不可能的,理由如下:
因此我们修改思路,使用一个变相 tree 的显示模式,采用【面包屑】 + 【表格】的显示模式。核心思路是仿【linux文件树】的形式显示。
给一个 UI 设计的示例图:
点击 childA 子节点后,显示内容变换:
如上图示例,我们将一个上亿数据的树,转换为一个最多显示几万数据的表格。
但是几万条数据的表格,数据还是太多了,因此我们需要再次优化。
在不能直接分页的情况下,我们需要优化表格的显示效果。
具体方法是使用【虚拟滚动条】。
所谓虚拟滚动条,指滚动条为手动写的一个滚动条,而不是浏览器自带的真实的滚动条。但是实际使用体验和真实滚动条是一样的。(这个是一个很常见的需求,有不少 ui 组件可以提供此功能)
而加载的数据,并不是加载全部数据,而是像分页一样。
假如显示区域,最大显示数据为 50 条,那么设 50 条为一页,每次加载其前后各 5 页的数据(即500 条)。
举例来说,初始显示区域,我们可以认为是第一页,此时加载第 1 ~ 10 页数据(即排序第 1 ~ 500 的数据)。
当往下滚动或者拖动到第 10 页时,此时加载第 5 ~ 15 页的数据(即排序 250 ~ 750 的数据)。
于是超大量数据单页表格的展示问题也解决。
入参:(请求数据)
{
startPage: 1,
endPage: 10,
pageSize: 50,
parentId: 1
}
出参:(返回数据)
{
pageInfo: {
startPage: 1,
endPage: 10,
pageSize: 50,
parentId: 1
},
data: [
{
id: 1,
name: 'childA',
parentId: 0,
},
// 更多数据....
]
}
如果觉得有所帮助,请点赞/关注,将鼓励我继续创作有价值的博文
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!