问题描述

react-window 是一个用于高效呈现大型列表和表格数据的 React 库但是这个库本身并不直接支持固定表格行列如果在使用 react-window 的时候存在固定行列需求，我们只能自己完成封装

固定行列虚拟 table 效果类似于这样：

实现原理 - 官方 demos & issues

如果要了解在 react-window 中如何实现固定头列(sticky 布局)，可以阅读下面资料：

table 的场景下，如果需要实现 4 个方向上(top, right, bottom, left)的 sticky 布局，那么展示应该如下图所示

区域说明：

$1, 2, 3, 4$ : z-index 为最大值的区域，该区域不会随着滚动而发生内容的变化

$5, 6, 7, 8$ : z-index 处于中间值的区域，5,7 不会随着 x 轴的滚动而发变化；6,8 不会随着 y 轴的滚动而发生变化

$content$ : z-index 为最小值的区域，是 table 的非 sticky 区域

这种多区块布局 + sticky 布局，直接封装组件很容易出现问题，所以这里我们先使用 html + css 完成最基础的布局，然后才进行组件的开发

页面效果：

封装思路：计算 $1, 2, 3, 4, 5, 6, 7, 8, content$ 所有容器的需要展示的元素，然后将这些元素塞入到预定好的 DOM 中

封装难点：8 个 sticky 元素的 css 布局实现起来比较麻烦

组件的代码和文档可以参照下面两个链接:

如果需要理解组件的具体实现，推荐先看完参考资料，理解 react-window 的基本原理

如果想要弄清楚实现细节，这里可以看下组件的实现细节，代码阅读难度不高，这里最难的地方其实这个 css 布局的处理