ant design vue 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区域