antd 的table分析_antd table colspan

大家应该都熟悉，antd的组件都是基于rc-*组件开发的，table对应的是rc-table,在antd引入的情况如下图所示

1. 基本用法
   通过props传递过来的columns和dataSource分别渲染头部thead下的th和内容tbody下的td, 其中dataSource是antd内部有封装方法getCurrentPageData进行分页处理的

主要渲染方式是rc-table文件的table下的getChildContext，返回的是table,在BaseTable下有this.context.table,同时BaseTable获取到了this.context.table信息，在render里通过createElement将元素渲染出来，因为是通过createElement渲染的，所以tableHeader可以是组件ReactElement形式

2. 选择操作
   通过查看源码发现，选择操作是antd去封装的，不是rc-table

antd下的table文件下有renderRowSelection，通过rowSelection是否为true来判断，会便利列表哪些选中哪些没选中，然后将其unshift到columns上

自定义选项是header有个筛选，rowSelection有selections会渲染，作为selectionColumn的title

3. 筛选和排序
   这个功能也是antd的，不是rc-table的,具体排序的方法就不详细介绍，主要是toggleSortOrder所示

4. 紧凑型+带边框
   在antd下添加class，通过css实现，但是title和footer是在rc-table里实现的
5. 可展开(嵌套子表格可以理解它的一个特例)
   实现主要是在rc-table里实现的，基础icon组件是ExpandIcon,里面包括了基本的render和事件等，在ExpandRow里拼接了class，最后是在baseTable里添加到row里，实现渲染等功能

6. 表头分组，table单元格的行/列合并的问题
   这个是我自己接触colSpan/rowSpan属性比较少，所以一直以为是通过css样式计算合并的，但一直找不到怎么计算的，后来发现colSpan/rowSpan是td的属性，只要你设置了会自动合并。
   好了，了解了colSpan/rowSpan就知道它是怎么实现的，譬如如果有5列，需要合并前3列，则只需要将第一个的colSpan设置成3，第二个第三个的设置为0(相当于第一个占有1、2、3的位置)，合并功能就完成了，是不是很简单（注意，如果你的2、3的colSpan不设置成0的话，它会有7列，并且会被挤出去）

7. 树形结构(有点没弄明白)
   最里层是用到了TableCell组件，TableRow是引入了TableCell，通过查找属性indentSize，发现是props 传递过来的，发现BaseTable和ExpandableTable均有引入，但通过查看传递的属性，其实是ExpandableTable引入的。

8. columns中的width 和table中的scroll

9.可编辑,主要是rc-table中，tableRow里接收table传过来components.body.cell,并渲染，渲染的内容是在columns下的onCell中，通过react.createContext交互传递的（需要继续学习react.createContext）

10. 可拖拽排序
    主要用到React-dnd，然后每行的元素通过components+columns组合，其中下图的BodyCell主要表示的是components,而tdProps是columns传递的属性，通过React.createElement形成dom元素

11. 可伸缩（同）
    同10，只是采用的是react-resizable实现的，而且我在antd里也没体验出伸缩的感觉。。。。

最后进行下总结，经过对antd table的功能研究，总结了几点要点，如下：
a. 主要功能是rc-table去实现的，antd里的更多的是样式上的统一
b. 所有的功能点组件化（如：TableHeader, TableRow, tableCell），最后在BaseTable里进行组装

c. 每行的内容通过components是可变化的，React.createContext的使用等

d. antd在V4.0.0开始逐步采用react hooks和typescript（接下来需要重点研究的内容）