2024年1月27日发(作者：)

antd中的选择框前面的文字

一、需求

在使用Table组件嵌套Table时，父子Table的选择框需要联动，即父Table选中，该行下的子Table需要全选中，某一个子Table全部选中，则该子Table所在的父Table那一行也需要选中。

二、Table的rowSelection配置

父子Table联动，就不能使用OnChange，需要使用OnSelect以及OnSelectAll手动配置。

selectedRowKeys：指定选中项的key数组

OnSelect：手动选择/取消选择某行的回调

OnSelect（record, selected, selectedRows）

record：选中的当前行数据

selected：选中状态，true：选中，false：取消选中

selectedRows：选择的数组

OnSelectAll：手动选择/取消选择所有行的回调

OnSelect（selected, selectedRows, changeRows）

selected：选中状态，true：选中，false：取消选中

selectedRows：选择的数组

changeRows：改变的所有数组

父子Table联动，就不能使用OnChange，需要使用OnSelect以及OnSelectAll手动配置。

selectedRowKeys：指定选中项的key数组

OnSelect：手动选择/取消选择某行的回调

OnSelect（record, selected, selectedRows）

record：选中的当前行数据

selected：选中状态，true：选中，false：取消选中

selectedRows：选择的数组

OnSelectAll：手动选择/取消选择所有行的回调

OnSelect（selected, selectedRows, changeRows）

2、创建childSelectedRowKeys，parentSelectedRowKeys变量，用来存放父子Table选中的key值

const [parentSelectedRowKeys, setParentSelectedRowKeys]

= useState([])

const [childSelectedRowKeys, setChildSelectedRowKeys] =

useState([])

3、设置子Table手动选择/取消某行的回调

onChildSelectChange

选择单个时，当前行选中，若将该Table的所有选项全部选中，则子Table对应的父Table所在的那一行也选中