乐趣区

如何实现-React-Table-固定列固定表头

jiezi

前段时间在研究并实现了如何实现表格的固定列（fixed column）功能，这里记录了思路和细节
表格控件比较复杂，应用场景也很多，需要各种数据展示、统计、操作等特性

原文有视频演示哦

  • live demo uke-dashboard https://admin.ukelli.com/ (用户名 admin, 密码 123). 介绍一下 uke-dashboard 是一套前后端分离模式的管理后台前端框架，已经经过了实际项目的验证，快速应对项目需求。
  • Ukelli-UI Table 的文档，此 Table 已经在 ukelli-ui 中实现，还有更多表格功能

期望效果

  1. 固定表头
  2. 左右各有一个固定的列
  3. 自动计算表格 cell 的宽度和高度，并且不能超过一定的长度，并且表头需要和表体同步宽度，不需要在配置中传入 UI 相关的宽度信息

实现细节

  1. 需要分别渲染 3 个表格

    1. mainTable 主体表格
    2. leftFixedTable 左边的固定列表格
    3. rightFixedTable 右边固定列表格
  2. 监听 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的显示区域
  3. 向所有的行（row）元素 tr 监听 mouseenter 事件，确保鼠标移过对应的行所有的表格都有一致的表现
  4. 记录第一列的所有的格子（td）的高度信息，用于给固定表格的格子高度
  5. 记录第一行的格子的宽度信息，给 TableHeader 同步 TableBody 的宽度信息

表格 Column 的宽度

目前主流的 Table 组件实现固定 column 时需要指定 column 的宽度，但是这样会定义更多 UI 相关的信息，例如 antd

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150, // 有 UI 相关的定义
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 150, // 有 UI 相关的定义
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

...

这样我认为会有一定 问题，因为根据以往的项目来看，这样会「分散开发时的注意力」，就算反复调试的 width 也未必准确，毕竟内容是不确定的。

所以 uke-table 对 column 的宽度做了计算优化，达到「column 自适应内容宽度」，超出一定宽度会自动换行这样的目的。 从而让开发更加专注于业务，而不是 UI 信息。

uke-table 文档: https://ui.ukelli.com/#/Table

退出移动版