這篇文章運用簡單易懂的例子給大家介紹Antd如何使用Table組件嵌套Table以及選擇框聯動，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

“專業、務實、高效、創新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業文化。 成都創新互聯是您可以信賴的網站建設服務商、專業的互聯網服務提供商! 專注于成都做網站、成都網站建設、軟件開發、設計服務業務。我們始終堅持以客戶需求為導向，結合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業性的建議，創新互聯建站將不斷地超越自我，追逐市場，引領市場！

一、需求

在使用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 <Table columns={childColumns} dataSource={childData} pagination={false} rowSelection={childRowSelection} />
 }
 return (
 <div>
  <Table columns={parentColumns} dataSource={dataSource} expandable={{ expandedRowRender }} rowSelection={parentRowSelection} />
 </div>
 );
}

當前題目：Antd如何使用Table組件嵌套Table以及選擇框聯動-創新互聯
網頁鏈接：http://vcdvsql.cn/article14/djgpge.html

成都網站建設公司_創新互聯，為您提供App開發、定制網站、軟件開發、外貿網站建設、虛擬主機、網站收錄

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯