React:Table 那些事(3-2)—— 斑马纹、固定表头

《React:Table 那些事》系列文章,会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某个具体功能展开分析:

  • 要实现什么功能?
  • 接口如何定义?
  • 功能如何实现(HTML结构、CSS效果)?
  • 有什么常见问题?如何解决?
  • 性能调优?注意事项?

这个即将诞生的 React Table 组件,就命名为 webj2ee-table

这一篇实现 webj2ee-table 的2个功能

1. 数据行的斑马纹效果

2. 固定表头

1. 斑马纹 - UI 效果

斑马纹

就是指隔行换色

2. 斑马纹 - API 接口

在 <Table> 组件上扩充

stripe 属性控制斑马纹效果

3. 斑马纹 - 代码实现

结构性伪类选择器

nth-child、nth-of-type

就能轻松搞定这个需求

下面实现复杂一些的

固定表头效果

4. 固定表头 - UI 效果

固定表头就是

当表体有竖向滚动条且[竖向]滚动时

表头固定不动的效果

5. 固定表头 - API 接口

固定表头通常是 表格高度控制的附加效果

6. 固定表头 - 注意事项

【第一】

固定表头是动态效果

由 Table 高度、数据量共同作用

【第二】

数据区出现竖向滚动条时

表头、表尾必须留出滚动条宽度

否则会出现列对不齐现象

【第三】

表头、表体、表尾由独立结构组成

当表体区域横向滚动时

表头、表尾要能够同步滚动

【第四】

在 Table 尺寸动态变化时

(比如:浏览器缩放)

上述三条也需要成立

7. 固定表头 - 代码实现

【第一】

表头、表体、表尾

的同步横向滚动通过 onScroll 实现

【第二】

动态计算表体是否存在竖向滚动条

决定是否在表头中增加 gutter

避免表头、表体对不齐

为了保持表头、表体能自然对齐

并且充分利用 <table> 的 css 特性

所以 gutter 独立于 header 存在

并利用 BFC 特性固定于右侧

效果展示

原文发布于微信公众号 - WebJ2EE(WebJ2EE)

原文发表时间:2019-01-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券