一、需求

在使用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界面

import React, { useEffect, useState } from 'react';

import { Table, } from 'antd'

export default () => {

const dataSource: any = [

{

key: '1',

title: '餐饮酒店/服务员',

number: '8家门店，共8人',

time: '2020.05.25 15:35',

childData: [

{

key: '1.1',

jobTitle: '大桶大足浴-保安',

num: '2人',

},

{

key: '1.2',

jobTitle: '大桶大足浴-保安',

num: '5人',

},

]

},

{

key: '2',

title: '餐饮酒店/收银员',

number: '无门店，共5人',

time: '2020.06.06 11:35',

childData: [

{

key: '2.1',

jobTitle: '大桶大足浴',

num: '0人',

},

{

key: '2.2',

jobTitle: '大桶大足浴',

num: '1人',

},

]

},

]

const parentColumns: any = [

{

title: '工种',

dataIndex: 'title',

key: 'title',

},

{

title: '关联门店数',

dataIndex: 'number',

key: 'number',

},

{

title: '时间',

dataIndex: 'time',

key: 'time',

},

]

const expandedRowRender = (record: any, index: any, indent: any, expanded: any) => {

const childData = record.childData

const childColumns: any = [

{

title: '岗位名称',

dataIndex: 'jobTitle',

key: 'jobTitle'

},

{

title: '招聘人数',

dataIndex: 'num',

key: 'num'

},

]

return

}

return (

);

}

四、开始配置rowSelection

1、配置父子Table的rowSelection

const childRowSelection = {

selectedRowKeys: childSelectedRowKeys,

onSelect: onChildSelectChange,

onSelectAll: onChildSelectAll

}

const parentRowSelection = {

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所在的那一行也选中

const onChildSelectChange = (record: any, selected: any, selectedRows: any) => {

let childArr: any = [...childSelectedRowKeys];

//第一步 判断selected true：选中，将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 (let item of dataSource) {

if (item.childData.find((d: any) => d.key === record.key)) {

let parentArr: 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行也取消选中

const onChildSelectAll = (selected: any, selectedRows: any, changeRows: any) => {

//第一步：判断selected，true：将子Table全部选中，false：将子Table全部取消选中

let childArr: any = [...childSelectedRowKeys];

if (selected) {

//全选

childArr = Array.from(new Set([...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 (let item of dataSource) {

if (item.childData.find((d: any) => d.key === changeRows[0].key)) {

let parentArr: 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也全部取消选中

const onParentSelectChange = (record: any, selected: any, selectedRows: any) => {

let patentArr: any = [...parentSelectedRowKeys];

let childArr: any = [...childSelectedRowKeys];

//setChildArr：选择父Table下的所有子选项

let setChildArr = dataSource.find((d: any) => d.key === record.key).childData.map((item: any) => item.key)

//第一步 判断selected true：选中，false，取消选中

if (selected) {

//第二步，父Table选中，子Table全选中(全部整合到一起，然后去重)

patentArr.push(record.key)

childArr = Array.from(new Set([...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也取消选中

const onParentSelectAll = (selected: any, selectedRows: any, changeRows: any) => {

let patentArr: any = [...parentSelectedRowKeys];

let setChildArr: any = [];

//将改变的父Table下的子Table下的key都添加到setChildArr中

changeRows.forEach((e: any) => {

setChildArr = [...setChildArr, ...e.childData.map((item: any) => item.key)]

});

//第一步判断selected true：全选，false：取消全选

if (selected) {

//第二步：父Table选中，子Table全选中，设置子Table的SelectedRowKeys

patentArr = Array.from(new Set([...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完整代码

import React, { useEffect, useState } from 'react';

import { Table, Button } from 'antd'

import { PlusOutlined } from '@ant-design/icons';

export default () => {

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

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

console.log(parentSelectedRowKeys, 'parentSelectedRowKeys')

console.log(childSelectedRowKeys, 'childSelectedRowKeys')

const dataSource: any = [

{

key: '1',

title: '餐饮酒店/服务员',

number: '8家门店，共8人',

time: '2020.05.25 15:35',

childData: [

{

key: '1.1',

jobTitle: '大桶大足浴-保安',

num: '2人',

},

{

key: '1.2',

jobTitle: '大桶大足浴-保安',

num: '5人',

},

]

},

{

key: '2',

title: '餐饮酒店/收银员',

number: '无门店，共5人',

time: '2020.06.06 11:35',

childData: [

{

key: '2.1',

jobTitle: '大桶大足浴',

num: '0人',

},

{

key: '2.2',

jobTitle: '大桶大足浴',

num: '1人',

},

]

},

]

const parentColumns: any = [

{

title: '工种',

dataIndex: 'title',

key: 'title',

},

{

title: '关联门店数',

dataIndex: 'number',

key: 'number',

},

{

title: '时间',

dataIndex: 'time',

key: 'time',

},

]

const expandedRowRender = (record: any, index: any, indent: any, expanded: any) => {

const childData = record.childData

const childColumns: any = [

{

title: '岗位名称',

dataIndex: 'jobTitle',

key: 'jobTitle'

},

{

title: '招聘人数',

dataIndex: 'num',

key: 'num'

},

]

return

}

const onParentSelectChange = (record: any, selected: any, selectedRows: any) => {

let patentArr: any = [...parentSelectedRowKeys];

let childArr: any = [...childSelectedRowKeys];

//setChildArr：选择父Table下的所有子选项

let setChildArr = dataSource.find((d: any) => d.key === record.key).childData.map((item: any) => item.key)

//第一步 判断selected true：选中，false，取消选中

if (selected) {

//第二步，父Table选中，子Table全选中

patentArr.push(record.key)

childArr = Array.from(new Set([...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)

}

const onParentSelectAll = (selected: any, selectedRows: any, changeRows: any) => {

let patentArr: any = [...parentSelectedRowKeys];

let setChildArr: any = [];

changeRows.forEach((e: any) => {

setChildArr = [...setChildArr, ...e.childData.map((item: any) => item.key)]

});

//第一步判断selected true：全选，false：取消全选

if (selected) {

//第二步：父Table选中，子Table全选中，设置子Table的SelectedRowKeys

patentArr = Array.from(new Set([...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)

}

const onChildSelectChange = (record: any, selected: any, selectedRows: any) => {

//record:当前操作行

//selected选中状态

//selectedRows:选择的数组

let childArr: any = [...childSelectedRowKeys];

//第一步 判断selected true：选中，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 (let item of dataSource) {

if (item.childData.find((d: any) => d.key === record.key)) {

let parentArr: 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)

}

const onChildSelectAll = (selected: any, selectedRows: any, changeRows: any) => {

//selected:全选true 取消全选false

//selectedRows:改变后的

//changeRows：改变的所有数组

//第一步：判断selected，true：将子Table全部选中，false：将子Table全部取消选中

let childArr: any = [...childSelectedRowKeys];

if (selected) {

//全选

childArr = Array.from(new Set([...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 (let item of dataSource) {

if (item.childData.find((d: any) => d.key === changeRows[0].key)) {

let parentArr: any = [...parentSelectedRowKeys];

if (selected) {

//全选

parentArr.push(item.key)

} else {

//取消全选

parentArr.splice(parentArr.findIndex((item: any) => item === item.key), 1)

}

setParentSelectedRowKeys(parentArr)

break;

}

}

setChildSelectedRowKeys(childArr)

}

const childRowSelection = {

selectedRowKeys: childSelectedRowKeys,

onSelect: onChildSelectChange,

onSelectAll: onChildSelectAll

}

const parentRowSelection = {

selectedRowKeys: parentSelectedRowKeys,

onSelect: onParentSelectChange,

onSelectAll: onParentSelectAll,

}

return (

);

}

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

antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作相关推荐

  1. antd 下拉框怎么联动_antd下拉框联动使用步骤详解

    这次给大家带来antd下拉框联动使用步骤详解,antd下拉框联动使用的注意事项有哪些,下面就是实战案例,一起来看一下. 先说一下效果要求,上面一个下拉框,下面一个,要求上面选中的时候,下面的内容要跟着 ...

  2. antd的 input有下拉_解决antd 下拉框 input [defaultValue] 的值的问题

    项目中有下拉框跟input需要回显,所以用到defaultValue这个默认值,在后台调接口调到defaultValue这个值给select设置,但是不好使 解决方法 直接用value 先加载选中的条 ...

  3. html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...

  4. antd下拉框联动说明

    先说一下效果要求,上面一个下拉框,下面一个,要求上面选中的时候,下面的内容要跟着变. 因为想到react是数据驱动的,就不打算再用jq的那种隐藏显示了,而是通过在执行类型下拉框的onChange事件中 ...

  5. dropdownlist三级联动怎么实现_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...

    Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...

  6. dw二级联动下拉菜单插件 宋君墨_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...

    Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...

  7. 选下拉框的的值对应上传相应的图片_excel表格下拉菜单调用对应数据,如何在excel中实现，选择下拉菜单某一项，该表格中就出现选项对应的数据？...

    如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据? 选中这几列 打开菜单"数据"-"筛选"-"自动筛选"就是了. 另 ...

  8. 一个简单的适用于Vue的下拉刷新，触底加载组件

    话不多说,直接上代码,原文地址 博客地址 <template><div class="list-warp-template"@touchstart="h ...

  9. Vue ElementUI 实现 Table 多列数据 checkBox选择框

    日期选择器 日期范围选择器 设置默认时间值 注意事项 value-format="yyyy-MM-dd hh:mm:ss" 格式化日期选择器 value值格式 :default-t ...

最新文章

  1. 斯坦福全球AI报告：人才需求两年暴增35倍，中国机器人部署量涨500%
  2. iterp2函数--------二维数据内插值
  3. php阿里的同步工具canal,基于阿里的Canal实现数据同步
  4. 列表导航栏实例（04）——精美模板赏析
  5. Go中对两个 nil 进行比较的结果是什么？
  6. 【react】 react---项目的-----------简单路由配置
  7. JAVA 数组，（java核心技术 卷1）
  8. 基于Java开发的五子棋游戏APP设计与实现
  9. 彻底搞懂js中的this指向
  10. HTML动画滑动图片特效
  11. iOS10更新_本地通知新框架UserNotifications
  12. java语言中modifiers_Java基础——Modifier类
  13. 周灏：金融大数据量化信用
  14. maven打包jar包到本地仓库
  15. L2-039 清点代码库 (25 分)
  16. 哥德尔不完备定理”到底说了些什么？
  17. 黑马程序员_Java基础_前期准备02-1
  18. 《工程伦理》2022秋长江雨课堂习题答案
  19. 自动化测试构架之Robot Framework——01 介绍
  20. dw网页设计期末设计一个网页_Dreamweaver网页设计模拟试题

热门文章

  1. [高级光照]球谐光照
  2. OpenGL ES Emulator横向比较
  3. iPad Air 2完全评测：可怕的三核CPU、六核GPU
  4. 2016年中国国际信息通信展览会在北京开幕
  5. 微信小程序 --- 获取网络状态
  6. XTU 1252 Defense Tower
  7. openwrt拦截snmp报文
  8. tcpdump查看某个端口数据
  9. integer expression expected或者unary operator expected
  10. Linux环境下源码编译方式安装MySQL5.1(1)