《React:Table 那些事》系列文章,会逐渐给大家呈现一个基于 React 的 Table 组件的定义、设计、开发过程。每篇文章都会针对 Table 的某个具体功能展开分析:
这个即将诞生的 React Table 组件,就命名为 webj2ee-table。
这一篇文章由两部分构成:
1. 构建 webj2ee-table 的基础接口
2. 增加边框控制功能(border=true)
现在主流 UI 框架中的 Table 组件
一般都是这样的
即在默认情况下
表格不显示列边框线
一般需要通过类似 border=true 的声明
控制边框显隐
webj2ee-table
也将采用默认不显示列边框的设计方式
下面具体看看设计过程
1. 基础表格 - 接口设计
首先构建 webj2ee-table 组件的
基础接口
2. 基础表格 - 应用示例
给出具体实现前
先看看基础接口怎么用
3. 基础表格 - 代码实现
用最直观、直接的方式
实现基础接口
暂时不考虑组件拆分、性能调优等问题
下面扩充边框控制功能
4. 边框控制 - 接口设计
5. 边框控制 - 应用示例
6. 边框控制 - 代码实现
边框控制的关键在于 CSS 部分
合理安排边框
避免多条边框叠加在一起
总结一波,截止到现在
webj2ee-table 已实现的接口为
参考:
less 技术手册; ant-design 源码; element-ui 源码; iView 源码; rsuite 源码;