React：Table 那些事（3-1）—— 基础表格、边框控制

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

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

这个即将诞生的 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 源码；