首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React:Table 那些事(3-3)—— 列宽自适应、列宽拖动

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

作者头像
WEBJ2EE
发布2019-07-19 12:20:13
8.4K1
发布2019-07-19 12:20:13
举报
文章被收录于专栏:WebJ2EEWebJ2EE

《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. 效果展示

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-01-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档