实现固定表头和表列的table组件

Posted 2022-12-16 wen_rc

前端的table在设置overflow后横向、纵向滚动。但数据比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。

目录

• • 实际效果
  • 设计思路
  • • 普通表格
    • 固定表头
    • 固定表列
    • 同时固定表头和表列

实际效果

table同时支持固定表头和左右两列

设计思路

这里从普通表格、固定表头、固定表列、同时固定表头表列逐步迭代讲解思路。

普通表格

首先是普通表格，就一个是数据的table，即图中body。

固定表头

然后当要固定表头，加入第二个table，即图中header，只显示表头。同时第一个table只显示body，设置高度，可以滚动。

固定表列

但要固定表列，假设固定左边的列，加入第三个table，如下图中的的tableLeft，显示在前两个table上面，即可实现固定表列。固定右边同理。

同时固定表头和表列

但要实现同时固定表头和表列，就需要加入第三个（即tableLeftHeader）、第四个table（tableLeftBody），tableLeftHeader只显示左边列固定的表头，tableLeftBody只显示左边列固定的表的内容。tableLeftHeader和tableLeftBody用绝对定位，当横向滚动时，位置都不变。滚动body时，监听滚动事件，把header的scrollLeft跟随body改变。但body竖向滚动时，把tableLeftBody的scrollTop跟随body改变。当固定右边的列时，操作跟左边的列类似。

这里需要注意的是，滚动监听里不要加耗时操作，或者把耗时操作都放到setTimeout里，不然可能会出现其他table滚动不跟手，不流畅。