antd实现父子嵌套表格

antd实现父子嵌套表格

1.总需求概述及代码框架构建
1.1.实现父子嵌套表格的总需求
使用antd框架，要在表格里面嵌套子表格，需要在用户点击父表格 前面的 + 图标后，去异步请求后台的数据用来填充子表格的内容，同时实现父子表格全选功能
注意：父表格的数据是一个接口，子表格的数据是另一个接口，两者不在一块
1.2.代码框架构建如下：

2.第一步需求：实现父子嵌套表格及点击父表格外的展开按钮，展开相应子表格数据操作

注意⚠️：子表格引入时也是有标题的，可按需求保留或隐藏（此版本为隐藏，通过在子表格中设置是否显示表头参数showHeader={false}即可实现）

2.1.父表格通过expandedRowRender参数引入子表格

注意⚠️：子表格要放在主文件的render后return之前
注意事项：不要直接在expandedRowRender直接发请求获取子表格数据，这样会出现不断发起请求的现象：

这是因为，expandedRowRender 实际上是在 Table 组件的 render 方法中调用的，React render 中用 dispatch 会造成重复调用的问题，dispatch -> setState -> render -> dispatch -> setState -> render，循环往复。所以应该把 dispatch 放在 onExpand 中。

但是单纯的这样做，又会带来新的问题，就是子表格的所有数据都变成了相同的。
解决办法是使用键值对

2.2.使用键值对
expandedRowKeys 展开的行控制属性，对应于行的key值及类型，这个属性放在父table 上。同时在onExpand展开功能里利用父表格的openid值做唯一键值


同时子表格获取数据的时候根据相应的键值获取，这样就不会有子表格的所有数据都变成了相同，详见子表格部分代码

3.第二步需求：实现父表格全选的功能
需要实现的效果如下：

情况说明：因antd中的父子嵌套表格是通过父表格引入另一个表格来实现的，所以只是形式上是父子嵌套表格，但功能上不是，如：勾选父表格只能选中父表格当前行内容，并不能选中子表格中的所有内容

但是目前实际效果：

3.1.首先：state初始化数据

实际要求勾选全部内容：父表格选中行的内容+子表格选中行的内容
故通过设置父子表格行的state状态值来分别存储相关值
3.2.选择父行后子表格中的所有行选中并且状态为勾选
3.2.1.具体实现代码：
通过父选择行函数在勾选用户号后发请求获取子表格所有内容后，将数据保存至子表格选中行的内容和key值中

3.2.2.父表格通过选中行操作获取到了子表格中的数据
展示如下：

3.2.3.将子表格的状态传给子表格组件
但是子表格的状态并未发生改变，这就需要将子表格状态值及内容传入到子表格组件中，并子表格组件做好接收，形成数据流

说明：这里用到了getDerivedStateFromProps生命周期函数，这个生命周期的意思就是从props中获取state，功能实际上就是将传入的props映射到state上面。这个函数会在每次re-rendering之前被调用，意味着即使你的props没有任何变化，而是父state发生了变化，导致子组件发生了re-render，这个生命周期函数依然会被调用。

故当数据流跑通后，子组件的状态就会得到重新渲染，至此父表格实现单行子表格内容全选功能已实现，效果如下

3.3.操作子表格选择行函数时改变父表格状态
3.3.1.实现单选多选/全选状态，将子组件的状态传给父组件并修改父组件中父子表格的选中状态

至此：父表格全选子表格状态更新，子表格全选父表格状态更新就完成了，但是这里还是要说明一下，因为特殊业务的需要嵌套表格还是会存在，antd中的父子表格全选功能并不完善（官网也并没有介绍到），尽管有onSelect和onSelectAll函数，但是在这边还是不好直接应用，因为这里的子表格涉及到根据父表格所在行参数展开查询对应子表格数据，且还涉及到子表格分页查询及其他业务功能操作，所有的数据并非一次性返回和形成层级，所以这两个函数在这里并不适用，只能自己根据需要写出功能。

这里同时附上onSelect和onSelectAll函数实现父子表格多选功能的方法，若后续有遇到同类场景的，可参考：
《当我们使用antd表中的rowSelection在父行上进行选择时，选择子行》
https://stackoom.com/question/3vFol/%E5%BD%93%E6%88%91%E4%BB%AC%E4%BD%BF%E7%94%A8antd%E8%A1%A8%E4%B8%AD%E7%9A%84rowSelection%E5%9C%A8%E7%88%B6%E8%A1%8C%E4%B8%8A%E8%BF%9B%E8%A1%8C%E9%80%89%E6%8B%A9%E6%97%B6-%E9%80%89%E6%8B%A9%E5%AD%90%E8%A1%8C