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

前端的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滚动不跟手,不流畅。

猜你喜欢

转载自blog.csdn.net/ZhaoBuDaoFangXia/article/details/128306002