Antd的Table组件嵌套Table以及选择框联动操作

2023-07-13 08:50:04 338

一、需求

在使用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：改变的所有数组

三、根据antd文档搭建Table嵌套Table界面

importReact,{useEffect,useState}from'react';
import{Table,}from'antd'
exportdefault()=>{
constdataSource:any=[
{
key:'1',
title:'餐饮酒店/服务员',
number:'8家门店，共8人',
time:'2020.05.2515:35',
childData:[
{
key:'1.1',
jobTitle:'大桶大足浴-保安',
num:'2人',
},
{
key:'1.2',
jobTitle:'大桶大足浴-保安',
num:'5人',
},
]
},
{
key:'2',
title:'餐饮酒店/收银员',
number:'无门店，共5人',
time:'2020.06.0611:35',
childData:[
{
key:'2.1',
jobTitle:'大桶大足浴',
num:'0人',
},
{
key:'2.2',
jobTitle:'大桶大足浴',
num:'1人',
},
]
},
]
constparentColumns:any=[
{
title:'工种',
dataIndex:'title',
key:'title',
},
{
title:'关联门店数',
dataIndex:'number',
key:'number',
},
{
title:'时间',
dataIndex:'time',
key:'time',
},
]
constexpandedRowRender=(record:any,index:any,indent:any,expanded:any)=>{
constchildData=record.childData
constchildColumns:any=[
{
title:'岗位名称',
dataIndex:'jobTitle',
key:'jobTitle'
},
{
title:'招聘人数',
dataIndex:'num',
key:'num'
},
]
return
}
return(



);
}

四、开始配置rowSelection

1、配置父子Table的rowSelection

constchildRowSelection={
selectedRowKeys:childSelectedRowKeys,
onSelect:onChildSelectChange,
onSelectAll:onChildSelectAll
}
constparentRowSelection={
selectedRowKeys:parentSelectedRowKeys,
onSelect:onParentSelectChange,
onSelectAll:onParentSelectAll,
}

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

const[parentSelectedRowKeys,setParentSelectedRowKeys]=useState([])

const[childSelectedRowKeys,setChildSelectedRowKeys]=useState([])

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

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

constonChildSelectChange=(record:any,selected:any,selectedRows:any)=>{
letchildArr:any=[...childSelectedRowKeys];
//第一步判断selectedtrue：选中，将key值添加到childArr，false：取消选中，将key值从childArr中移除
if(selected){
childArr.push(record.key)
}else{
childArr.splice(childArr.findIndex((item:any)=>item===record.key),1)
}
//必须去除undefined，否则selectedRows会将其他子Table中选中的key值放到数组中，但是值为undefined，如：[undefined，1，uundefined]
selectedRows=selectedRows.filter((a:any)=>a!==undefined)
//第二步，判断selectedRows的长度是否为data中child的长度，相等，就将父table选中，不等就不选中
for(letitemofdataSource){
if(item.childData.find((d:any)=>d.key===record.key)){
letparentArr:any=[...parentSelectedRowKeys];
if(item.childData.length===selectedRows.length){
parentArr.push(item.key)
}else{
if(parentArr.length&&parentArr.find((d:any)=>d===item.key)){
parentArr.splice(parentArr.findIndex((item1:any)=>item1===item.key),1)
}
}
setParentSelectedRowKeys(parentArr)
break;
}
}
setChildSelectedRowKeys(childArr)
}

4、设置子Table手动选择/取消选择所有行的回调onChildSelectAll

当选择全选时，子Table全部选中，并且该子table对应的父table行也选中，取消全选时，子Table全部取消选中，父Table行也取消选中

constonChildSelectAll=(selected:any,selectedRows:any,changeRows:any)=>{
//第一步：判断selected，true：将子Table全部选中，false：将子Table全部取消选中
letchildArr:any=[...childSelectedRowKeys];
if(selected){
//全选
childArr=Array.from(newSet([...childArr,...changeRows.map((item:any)=>item.key)]))
}else{
//取消全选
childArr=childArr.filter((item:any)=>!changeRows.some((e:any)=>e.key===item))
}
//第二步：找到子Table对应的父Table的所在行，再判断selected，true：将父Table所在行选中，false：将父Table所在行取消选中
for(letitemofdataSource){
if(item.childData.find((d:any)=>d.key===changeRows[0].key)){
letparentArr:any=[...parentSelectedRowKeys];
if(selected){
//全选
parentArr.push(item.key)
}else{
//取消全选
parentArr.splice(parentArr.findIndex((item:any)=>item===item.key),1)
}
setParentSelectedRowKeys(parentArr)
break;
}
}
setChildSelectedRowKeys(childArr)
}

5、设置父Table手动选择/取消某行的回调onParentSelctChange

当选择父Table某一行时，该行下的子Table全部选中，取消选择时，该行下的子Table也全部取消选中

constonParentSelectChange=(record:any,selected:any,selectedRows:any)=>{
letpatentArr:any=[...parentSelectedRowKeys];
letchildArr:any=[...childSelectedRowKeys];
//setChildArr：选择父Table下的所有子选项
letsetChildArr=dataSource.find((d:any)=>d.key===record.key).childData.map((item:any)=>item.key)
//第一步判断selectedtrue：选中，false，取消选中
if(selected){
//第二步，父Table选中，子Table全选中（全部整合到一起，然后去重）
patentArr.push(record.key)
childArr=Array.from(newSet([...setChildArr,...childArr]))
}else{
//第二步，父Table取消选中，子Table全取消选中（针对childArr，过滤掉取消选中的父Table下的所有子Table的key）
patentArr.splice(patentArr.findIndex((item:any)=>item===record.key),1)
childArr=childArr.filter((item:any)=>!setChildArr.some((e:any)=>e===item))
}
//第三步，设置父，子的SelectedRowKeys
setParentSelectedRowKeys(patentArr)
setChildSelectedRowKeys(childArr)
}

6、设置父Table手动选择/取消选择所有行的回调onParentSelectAll

全选时，父Table全部选中，所有对应的子Table也全部选中。取消全选时，父Table取消选中，所有子Table也取消选中

constonParentSelectAll=(selected:any,selectedRows:any,changeRows:any)=>{
letpatentArr:any=[...parentSelectedRowKeys];
letsetChildArr:any=[];
//将改变的父Table下的子Table下的key都添加到setChildArr中
changeRows.forEach((e:any)=>{
setChildArr=[...setChildArr,...e.childData.map((item:any)=>item.key)]
});
//第一步判断selectedtrue：全选，false：取消全选
if(selected){
//第二步：父Table选中，子Table全选中，设置子Table的SelectedRowKeys
patentArr=Array.from(newSet([...patentArr,...changeRows.map((item:any)=>item.key)]))
setChildSelectedRowKeys(setChildArr)
}else{
//第二步：父Table取消选中，子Table全取消选中，设置子Table的SelectedRowKeys
patentArr=patentArr.filter((item:any)=>!changeRows.some((e:any)=>e.key===item))
setChildSelectedRowKeys([])
}
//第三步：设置父Table的SelectedRowKeys
setParentSelectedRowKeys(patentArr)
}

这样，父子Table的选择框联动就完成了，

注意：dataSource数据格式根据自己的格式而定

五、完整Demo

Table嵌套Table完整代码

importReact,{useEffect,useState}from'react';
import{Table,Button}from'antd'
import{PlusOutlined}from'@ant-design/icons';
exportdefault()=>{
const[parentSelectedRowKeys,setParentSelectedRowKeys]=useState([])
const[childSelectedRowKeys,setChildSelectedRowKeys]=useState([])
console.log(parentSelectedRowKeys,'parentSelectedRowKeys')
console.log(childSelectedRowKeys,'childSelectedRowKeys')
constdataSource:any=[
{
key:'1',
title:'餐饮酒店/服务员',
number:'8家门店，共8人',
time:'2020.05.2515:35',
childData:[
{
key:'1.1',
jobTitle:'大桶大足浴-保安',
num:'2人',
},
{
key:'1.2',
jobTitle:'大桶大足浴-保安',
num:'5人',
},
]
},
{
key:'2',
title:'餐饮酒店/收银员',
number:'无门店，共5人',
time:'2020.06.0611:35',
childData:[
{
key:'2.1',
jobTitle:'大桶大足浴',
num:'0人',
},
{
key:'2.2',
jobTitle:'大桶大足浴',
num:'1人',
},
]
},
]
constparentColumns:any=[
{
title:'工种',
dataIndex:'title',
key:'title',
},
{
title:'关联门店数',
dataIndex:'number',
key:'number',
},
{
title:'时间',
dataIndex:'time',
key:'time',
},
]
constexpandedRowRender=(record:any,index:any,indent:any,expanded:any)=>{
constchildData=record.childData
constchildColumns:any=[
{
title:'岗位名称',
dataIndex:'jobTitle',
key:'jobTitle'
},
{
title:'招聘人数',
dataIndex:'num',
key:'num'
},
]
return
}
constonParentSelectChange=(record:any,selected:any,selectedRows:any)=>{
letpatentArr:any=[...parentSelectedRowKeys];
letchildArr:any=[...childSelectedRowKeys];
//setChildArr：选择父Table下的所有子选项
letsetChildArr=dataSource.find((d:any)=>d.key===record.key).childData.map((item:any)=>item.key)
//第一步判断selectedtrue：选中，false，取消选中
if(selected){
//第二步，父Table选中，子Table全选中
patentArr.push(record.key)
childArr=Array.from(newSet([...setChildArr,...childArr]))
}else{
//第二步，父Table取消选中，子Table全取消选中
patentArr.splice(patentArr.findIndex((item:any)=>item===record.key),1)
childArr=childArr.filter((item:any)=>!setChildArr.some((e:any)=>e===item))
}
//第三步，设置父，子的SelectedRowKeys
setParentSelectedRowKeys(patentArr)
setChildSelectedRowKeys(childArr)
}
constonParentSelectAll=(selected:any,selectedRows:any,changeRows:any)=>{
letpatentArr:any=[...parentSelectedRowKeys];
letsetChildArr:any=[];
changeRows.forEach((e:any)=>{
setChildArr=[...setChildArr,...e.childData.map((item:any)=>item.key)]
});
//第一步判断selectedtrue：全选，false：取消全选
if(selected){
//第二步：父Table选中，子Table全选中，设置子Table的SelectedRowKeys
patentArr=Array.from(newSet([...patentArr,...changeRows.map((item:any)=>item.key)]))
setChildSelectedRowKeys(setChildArr)
}else{
//第二步：父Table取消选中，子Table全取消选中，设置子Table的SelectedRowKeys
patentArr=patentArr.filter((item:any)=>!changeRows.some((e:any)=>e.key===item))
setChildSelectedRowKeys([])
}
//第三步：设置父Table的SelectedRowKeys
setParentSelectedRowKeys(patentArr)
}
constonChildSelectChange=(record:any,selected:any,selectedRows:any)=>{
//record:当前操作行
//selected选中状态
//selectedRows:选择的数组
letchildArr:any=[...childSelectedRowKeys];
//第一步判断selectedtrue：选中，false：取消选中
if(selected){
childArr.push(record.key)
}else{
childArr.splice(childArr.findIndex((item:any)=>item===record.key),1)
}
selectedRows=selectedRows.filter((a:any)=>a!==undefined)
//第二步，判断selectedRows的长度是否为data中child的长度，相等，就将父table选中，不等就不选中
for(letitemofdataSource){
if(item.childData.find((d:any)=>d.key===record.key)){
letparentArr:any=[...parentSelectedRowKeys];
if(item.childData.length===selectedRows.length){
parentArr.push(item.key)
}else{
if(parentArr.length&&parentArr.find((d:any)=>d===item.key)){
parentArr.splice(parentArr.findIndex((item1:any)=>item1===item.key),1)
}
}
setParentSelectedRowKeys(parentArr)
break;
}
}
setChildSelectedRowKeys(childArr)
}
constonChildSelectAll=(selected:any,selectedRows:any,changeRows:any)=>{
//selected:全选true取消全选false
//selectedRows:改变后的
//changeRows：改变的所有数组
//第一步：判断selected，true：将子Table全部选中，false：将子Table全部取消选中
letchildArr:any=[...childSelectedRowKeys];
if(selected){
//全选
childArr=Array.from(newSet([...childArr,...changeRows.map((item:any)=>item.key)]))
}else{
//取消全选
childArr=childArr.filter((item:any)=>!changeRows.some((e:any)=>e.key===item))
}
//第二步：找到子Table对应的父Table的所在行，再判断selected，true：将父Table所在行选中，false：将父Table所在行取消选中
for(letitemofdataSource){
if(item.childData.find((d:any)=>d.key===changeRows[0].key)){
letparentArr:any=[...parentSelectedRowKeys];
if(selected){
//全选
parentArr.push(item.key)
}else{
//取消全选
parentArr.splice(parentArr.findIndex((item:any)=>item===item.key),1)
}
setParentSelectedRowKeys(parentArr)
break;
}
}
setChildSelectedRowKeys(childArr)
}
constchildRowSelection={
selectedRowKeys:childSelectedRowKeys,
onSelect:onChildSelectChange,
onSelectAll:onChildSelectAll
}
constparentRowSelection={
selectedRowKeys:parentSelectedRowKeys,
onSelect:onParentSelectChange,
onSelectAll:onParentSelectAll,
}

return(



);
}

以上这篇Antd的Table组件嵌套Table以及选择框联动操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。