table icon indicating copy to clipboard operation
table copied to clipboard

feat: virtual list at Y-axis when using table tag

Open raunyuyuan opened this issue 4 years ago • 1 comments

目的:

在使用table标签时添加虚拟列表支持的同时支持:固定行列,以及筛选,排序等功能。

解决问题:

组件原有虚拟列表为div标签,不包含筛选,固定行列等功能。

实现方式:

  1. 根据 start, end 变量控制渲染列表的个数 len = end - start
  2. 用一个相对定位的盒子virtual-box,撑出滚动区域。将内容table放在virtual-box子div中,该子div绝对定位,根据隐藏了多少起始行的行高,改变它在相对定位盒子中的位置。
  3. 首次加载 start 为 0 end 为 1依次渲染行,并通过dom得到行高集合rowsHeightsend++ 一直到总高度超过scroll.y值停止
  4. 开始沿着y轴滚动时,
    • start::根据行高的集合rowsHeightsscrollTop算出新的start即已滚动超过了多少行 。
    • end:计算需要知道scrollTop是否滚动过当前最后一行,所以需要依赖当前的end衍生出新的end,但是如果end保存在state中会有数据data先过来,但是end无法和data一起更新, end >= data.length 越界的情况,所以将当前的end 保存在useRef中,通过useMemo计算出新的值。

raunyuyuan avatar Nov 08 '20 05:11 raunyuyuan

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/react-component/table/jyiwiaazp
✅ Preview: https://table-git-virtual-list-yaixs.react-component.vercel.app

vercel[bot] avatar Nov 08 '20 05:11 vercel[bot]