Antd的嵌套表格-点击当前行异步获取子表格数据

向右看齐 2022-11-04 11:26 711阅读 0赞

> 描述一下需求：使用Antd的嵌套表格写的，点击当前行需要请求当前行子表格数据，同时可以展开多行，然后在更换查询条件时，表格展开的行，都合起来。

因为项目保密性问题，就用Antd官方示例截图，凑合看吧：  
1，点击当前行，再去请求它的子表格数据，子表格数据都是不一样的  
2，同时可以展开多行  
3，在切换上面的搜索条件后，所有展开的行合起来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
我被卡在哪里了呢，就是这个子表格数据时点击当前行来的，但是要同时展开多个，写过并且看到我这篇文章的童鞋，应该知道，会造成只有最后一个点击行的子表格有数据，你又不能在展开行发生变化的时候，去循环请求接口，拿到数据，这太蠢了 ，然后历经各种办法得出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
然后就是第二个问题，切换上面的搜索条件后，所有展开行都合起来，绑上属性`expandedRowKeys`展开行的数组，初始值是空，再写上展开行变换事件，在事件里面设置属性`expandedRowKeys`，在搜索条件改变的时候，将`expandedRowKeys`再次置空：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]

const [expandRows, setExpandRows] = useState()；
    点击搜索：
    setExpandRows([])

就酱~目前仍处于对react配合Antd的深层摸索阶段  
路过大神请指教~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20221023/b87e7a6a3f4648b69b0f380230baf6e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: /images/20221023/9aa12e7240f44f0792a802450ce3e4d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: /images/20221023/b9f12c14b0904d6689b4a43f2d2e2b60.png