el table 固定表头和首行_再谈table组件：固定表头和表列

前言Github原文：github.com/qiud...

本文介绍内容包括：

1. Element UI 实现表头表列固定思考与总结

2. translate3d如何实现表头表列固定

书承上文，在前文【Vue进阶】青铜选手，如何自研一套UI库中介绍了Vue组件库的开发细节，举例实现了button、table等组件的开发。在Ange这个UI库中，我实现了一个内容高可定制的表格组件：可固定表头和表列，内容则自行定义。

首先要承认，这个table组件实现的功能很简单：创建表格展示数据

可固定表头

可固定表列

可实现简易版多级表头

表格组件是UI库里面最为复杂的组件之一，项目中使用表格的场景特别多，我们很难覆盖所有人的需求，比较常见的就有：固定表头

固定表左/右侧列

多级表头

勾选行数据

展开行数据

数据排序

从作用对象来看，这些需求又可归为影响布局(Eg: 固定表头表列)和影响数据(Eg: 勾选数据)两个大类。在Ange UI的table组件中，仅仅实现了影响布局这个类下面的部分功能，该组件不操作数据，甚至具体到使用tr、td标签(以及td里面如何包裹数据)展示数据也是由使用者自己定义的。狠狠点击这里在线查看示例，或者查看代码：

姓名{ { each }}{ { each.name }}{ { each.verdict }}{ { each.song }}

通过插槽slot指定thead或是tbody。简单就意味着精细和可拓展性强，同时带来的问题就是用户的使用成本高了(比如实现数据选择功能，当然ag-table在不操作源数据的原则下也能拓展出这个功能)。

谈谈element的固定表头表列

从浏览器中审查Element table组件的渲染效果看，Element实现固定表头表列的方式是：将固定的部分(如表头)和不固定的部分(如表体)拆分放在不同区域(不同的div下)，设置表体所在区域可滚动即可，然后再通过一定的手段(如阴槽、表格数据备份)去同步不同区域之间的布局。

在一篇饿了么专题的文章中，详细阐述了固定表头表列的实现。下面简单总结并整理其中存在的问题。

1.1 固定表头的思路

从浏览器中审查table组件的渲染效果看：

表头和表体分别放在了两个不同的div区域：el-table__header-wrapper & el-table__body-wrapper，如此表体内容超出容器高度时，会出现滚动条，只在自己区域内滚动，达到了表头固定的效果。这样的实现导致了两个问题：两个表格宽度不一致：表体所在的区域多出了一条滚动条

两个表格之间的列宽如何保持一致

针对上面的问题，element也做了处理，引用饿了么文中一张图片：

在表头部分增加一个Gutter元素，虚拟成滚动条去占据一定宽度(图片右上角粉色的竖条)，宽度一致的处理则是要求用户使用的时候个传