這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹Antd如何使用Table組件嵌套Table以及選擇框聯(lián)動(dòng)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

“專(zhuān)業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴(lài)的網(wǎng)站建設(shè)服務(wù)商、專(zhuān)業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專(zhuān)注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺(jué)傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專(zhuān)業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

一、需求

在使用Table組件嵌套Table時(shí)，父子Table的選擇框需要聯(lián)動(dòng)，即父Table選中，該行下的子Table需要全選中，某一個(gè)子Table全部選中，則該子Table所在的父Table那一行也需要選中。

二、Table的rowSelection配置

父子Table聯(lián)動(dòng)，就不能使用OnChange，需要使用OnSelect以及OnSelectAll手動(dòng)配置。

selectedRowKeys：指定選中項(xiàng)的key數(shù)組

OnSelect：手動(dòng)選擇/取消選擇某行的回調(diào)

OnSelect（record, selected, selectedRows）

record：選中的當(dāng)前行數(shù)據(jù)

selected：選中狀態(tài)，true：選中，false：取消選中　　　　　

selectedRows：選擇的數(shù)組

OnSelectAll：手動(dòng)選擇/取消選擇所有行的回調(diào)　　　　　　

OnSelect（selected, selectedRows, changeRows）　　　　　　　

selected：選中狀態(tài)，true：選中，false：取消選中　　　　　　

selectedRows：選擇的數(shù)組　　

changeRows：改變的所有數(shù)組

三、根據(jù)antd文檔搭建Table嵌套Table界面

import React, { useEffect, useState } from 'react';
import { Table, } from 'antd'
export default () => {
 const dataSource: any = [
 {
  key: '1',
  title: '餐飲酒店/服務(wù)員',
  number: '8家門(mén)店，共8人',
  time: '2020.05.25 15:35',
  childData: [
  {
   key: '1.1',
   jobTitle: '大桶大足浴-保安',
   num: '2人',
  },
  {
   key: '1.2',
   jobTitle: '大桶大足浴-保安',
   num: '5人',
  },
  ]
 },
 {
  key: '2',
  title: '餐飲酒店/收銀員',
  number: '無(wú)門(mén)店，共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: '關(guān)聯(lián)門(mén)店數(shù)',
  dataIndex: 'number',
  key: 'number',
 },
 {
  title: '時(shí)間',
  dataIndex: 'time',
  key: 'time',
 },
 ]
 const expandedRowRender = (record: any, index: any, indent: any, expanded: any) => {
 const childData = record.childData
 const childColumns: any = [
  {
  title: '崗位名稱(chēng)',
  dataIndex: 'jobTitle',
  key: 'jobTitle'
  },
  {
  title: '招聘人數(shù)',
  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>
 );
}

當(dāng)前題目：Antd如何使用Table組件嵌套Table以及選擇框聯(lián)動(dòng)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)鏈接：http://chinadenli.net/article14/djgpge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、定制網(wǎng)站、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)