Antd如何使用Table組件嵌套Table以及選擇框聯(lián)動-創(chuàng)新互聯(lián)

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

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

一、需求

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

二、Table的rowSelection配置

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

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

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

OnSelect（record, selected, selectedRows）

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

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

selectedRows：選擇的數(shù)組

OnSelectAll：手動選擇/取消選擇所有行的回調(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家門店，共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: '關(guān)聯(lián)門店數(shù)',
  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: '招聘人數(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)動-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://muchs.cn/article14/djgpge.html

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

廣告

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