React:Table 那些事(3-3)—— 列宽自适应、列宽拖动

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

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

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

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

1. 列宽自适应

2. 列宽拖动

1. 列宽自适应

1.1. 如何自适应?

  • 表格的列可以手动配置宽度;
  • 若各列的宽度和 < 表格可视区宽度,则多余的空间平均分配到各列;
  • 若各列的宽度和 > 表格可视区宽度,则各列宽度不变,横向出滚动条;
  • 当表格动态缩放时,上述条件同样满足;

1.2. 实现策略?

HTML 中 <table> 的固定布局模型

就符合上述规则,无需特殊处理

—— https://www.w3.org/TR/CSS22/tables.html#fixed-table-layout

1.3. 核心代码实现

1.4. 效果展示

2. 列宽拖动

2.1. 采用什么技术?

核心是“拖动”效果

选用市面上主流的 resize 插件即可

例如:react-resizable

2.2. 代码实现?

2.3. 效果展示

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券