最近了解Ant design 設(shè)計(jì)table 單擊行選中checkedbox功能，相比于element的 @row-click 再觸發(fā)toggleRowSelection，ant design的api就沒(méi)那么清晰了，言歸正傳

期望：Ant design table 單擊行選中 勾選checkedbox

實(shí)現(xiàn)：

單選：

onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); this.selectedRowKeys = keys; } } }}

多選：

onClickRowMulti(record) { return { on: { click: () => { let rowKeys=this.selectedRowKeys if(rowKeys.length>0 && rowKeys.includes(record.id)){ rowKeys.splice(rowKeys.indexOf(record.id),1) }else{ rowKeys.push(record.id) } this.selectedRowKeys = rowKeys; } } } }

補(bǔ)充知識(shí)：使用Ant Design的Table和Checkbox模擬Tree

先看下設(shè)計(jì)圖：

需求如下：

1、一級(jí)選中（取消選中），該一級(jí)下的二級(jí)全部選中（取消選中）

2、二級(jí)全選，對(duì)應(yīng)的一級(jí)選中，二級(jí)未全選中，對(duì)應(yīng)的一級(jí)不選中

3、支持搜索，只搜索二級(jí)數(shù)據(jù)，并且只展示搜索到的數(shù)據(jù)以及對(duì)應(yīng)的一級(jí)title，如：搜索“店員”，此時(shí)一級(jí)只展示咖啡廳....其他一級(jí)隱藏，二級(jí)只展示店員，其他二級(jí)隱藏

4、搜索出來(lái)的數(shù)據(jù)，一級(jí)不可選中，即不允許全選，搜索框清空時(shí)，回歸初始化狀態(tài)

5、搜索后，自動(dòng)展開(kāi)所有二級(jí)，默認(rèn)情況下收起所有二級(jí)

看到圖的時(shí)候，第一反應(yīng)就是使用Tree就能搞定，但是翻閱了文檔后，發(fā)現(xiàn)Tree并不能全部完成，所以就只能使用其他組件進(jìn)行拼裝，最后發(fā)現(xiàn)使用Table和Checkbox可以完美實(shí)現(xiàn)。

如果不想看這些，可直接到最后，有完整代碼。。。。。。

1、頁(yè)面構(gòu)建

這個(gè)就不用多說(shuō)，只是一個(gè)簡(jiǎn)單的Table嵌套Checkbox，具體可去查看文檔，直接貼代碼，因?yàn)槭遣季郑锌梢院雎源a中的事件。

注意一點(diǎn)：因?yàn)樗阉鲿r(shí)，會(huì)改變數(shù)據(jù)，所以需要將初始化的數(shù)據(jù)進(jìn)行保存。

import React, { useState, useRef, useEffect } from 'react';import { Table, Input, Checkbox } from 'antd';const { Search } = Input;export default () => { const initialData: any = useRef([]); //使用useRef創(chuàng)建initialData const [data, setData] = useState([ { key: 1, title: '普通餐廳（中餐/日料/西餐廳）', checkboxData: [ { key: 12, title: '普通服務(wù)員' }, { key: 13, title: '收銀' }, { key: 14, title: '迎賓/接待' }, ], }, { key: 2, title: '零售/快消/服裝', checkboxData: [ { key: 17, title: '基礎(chǔ)店員' }, { key: 19, title: '收銀員' }, { key: 20, title: '理貨員' }, ], }, ]); useEffect(() => { initialData.current = [...data]; //設(shè)置初始化值 }, []); const [checkedJob, setCheckedJob] = useState([]); //設(shè)置子級(jí)中選擇的類 const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //設(shè)置選擇的行 const expandedRowRender = (record: any) => { return ( <div style={{ paddingLeft: 50, boxSizing: 'border-box' }}> <p>請(qǐng)選擇崗位，或勾選類別全選崗位</p> <div> <Checkbox.Group value={checkedJob}> {record.checkboxData.map((item: any) => { return ( <Checkbox value={item.key} key={item.key} onChange={checkChange} > {item.title} </Checkbox> ); })} </Checkbox.Group> </div> </div> ); }; const rowSelection = { selectedRowKeys, }; return ( <div style={{ background: '#fff', padding: 24, boxSizing: 'border-box', width: 982, }} > <Search placeholder='請(qǐng)輸入崗位名稱' onSearch={(value) => { console.log(loop(value)); }} /> <Table showHeader={false} columns={columns} expandable={{ expandedRowRender, }} dataSource={data} pagination={false} rowSelection={rowSelection} /> </div> );};const columns = [{ title: 'title', dataIndex: 'title', key: 'title' }];

2、一級(jí)選中（取消全選）

當(dāng)一級(jí)選中（取消全選）時(shí)，需要更新對(duì)應(yīng)二級(jí)選項(xiàng)的狀態(tài)。在antd文檔中，使用rowSelection的onSelect，可以設(shè)置選擇/取消選擇某行的回調(diào)。

onSelect：（record，selected）=> record：操作當(dāng)前行的數(shù)據(jù)，selected：true：全選，false：取消全選

注意：當(dāng)全選時(shí)，不能直接添加當(dāng)前一級(jí)下的所有二級(jí)，需要過(guò)濾掉當(dāng)前已經(jīng)選中的二級(jí)

具體邏輯如下代碼：

//首選在rowSelection配置中添加onSelectconst rowSelection = { selectedRowKeys, onSelect };//一級(jí)全選或者取消的邏輯const onSelect = (record: any, selected: any) => { //因?yàn)榇嬖谒阉鳎孕枰褂梦覀兊某跏蓟瘮?shù)據(jù)，找到當(dāng)前record.key在初始化數(shù)據(jù)中對(duì)應(yīng)的數(shù)據(jù) let initialParent = initialData.current.find( (d: any) => d.key === record.key );//初始化數(shù)據(jù)中對(duì)應(yīng)的二級(jí)數(shù)據(jù) let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (selected) { //全選 //向selectRowKeys添加選中的值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //取消全選 //從父級(jí)數(shù)組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } };

3、二級(jí)選中或取消選中邏輯

二級(jí)選中或者取消比較簡(jiǎn)單，只要注意在選中時(shí)，如何去考慮是否所有二級(jí)全部選中即可。具體代碼如下。

//判斷b數(shù)組中的數(shù)據(jù)是否全部在a數(shù)組中 const isContained = (a: any, b: any) => { if (!(a instanceof Array) || !(b instanceof Array)) return false; if (a.length < b.length) return false; var aStr = a.toString(); for (var i = 0, len = b.length; i < len; i++) { if (aStr.indexOf(b[i]) == -1) return false; } return true; };//設(shè)置checkbox的onChange事件 const checkChange = (e: any) => { let praentRowsKey: any; //找到選中的二級(jí)對(duì)應(yīng)的父級(jí)key initialData.current.forEach((v: any) => { if (v.checkboxData.find((d: any) => d.key === e.target.value)) { praentRowsKey = v.key; } }); if (e.target.checked) { //選中時(shí) 設(shè)置當(dāng)前的check數(shù)組 let newCheckedJob = [...checkedJob, e.target.value]; setCheckedJob(newCheckedJob); //判斷當(dāng)前二級(jí)的內(nèi)容是否全部被選中，如果全部選中，則需要設(shè)置selectedRowKeys //praentRowsKey下的所有子元素 let childArr = initialData.current .find((d: any) => d.key === praentRowsKey) ?.checkboxData?.map((i: any) => i.key); // 為當(dāng)前選擇之后的新數(shù)組 if (isContained(newCheckedJob, childArr)) { //全部包含，設(shè)置父級(jí) setSelectedRowKeys([...selectedRowKeys, praentRowsKey]); } } else { //取消選中 設(shè)置當(dāng)前的child數(shù)組 setCheckedJob( [...checkedJob].filter((d: number) => d !== e.target.value) ); //判斷當(dāng)前父級(jí)中是否存在praentRowsKey，存在則去除 if (!!~selectedRowKeys.indexOf(praentRowsKey)) { setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== praentRowsKey) ); } } };

4、搜索過(guò)濾

前3步驟完成后，目前來(lái)說(shuō)，正常的一級(jí)二級(jí)聯(lián)動(dòng)已經(jīng)完成，現(xiàn)在進(jìn)行第4步，搜索過(guò)濾。

簡(jiǎn)單的說(shuō)，搜索的時(shí)候，只要改變我們的data，就可以重新渲染Table，這樣就可以達(dá)成搜索過(guò)濾的效果。具體代碼如下

//Search組件搜索時(shí)，觸發(fā)更改data<Search placeholder='請(qǐng)輸入崗位名稱' onSearch={(value) => { setData(loop(value)); }}/> //搜索崗位時(shí)，進(jìn)行過(guò)濾 const loop = (searchValue: any) => { let loopData = initialData.current?.map((item: any) => {//判斷一級(jí)是否包含該搜索內(nèi)容　 let parentKey = !!~item.title.indexOf(searchValue); let childrenData: any = []; if (item.checkboxData) { //如果存在二級(jí)，則進(jìn)行二級(jí)的循環(huán),過(guò)濾出搜索到的value childrenData = item.checkboxData.filter( (d: any) => !!~d.title.indexOf(searchValue) ); } //如果一級(jí)有，二級(jí)沒(méi)有，則展示一級(jí)下所有的二級(jí)　 //如果一級(jí)沒(méi)有，二級(jí)有，則只展示存在的二級(jí)以及對(duì)應(yīng)的一級(jí) //如果一級(jí)有，二級(jí)有，則展示存在的二級(jí)以及對(duì)應(yīng)的一級(jí) //如果一級(jí)沒(méi)有，二級(jí)也沒(méi)有，則不展示 if(parentKey&&!childrenData.length){ return {title:item.title,key:item.key,checkboxData:item.checkboxData} }else if((!parentKey || parentKey)&&childrenData.length){return{title:item.title,key:item.key,checkboxData:childrenData}}else{} });//搜索的值不為空時(shí)，返回搜索過(guò)濾后都數(shù)據(jù)（因?yàn)閙ap出來(lái)的數(shù)據(jù)中有undefined，所以需要再次進(jìn)行過(guò)濾），為空時(shí)返回初始化數(shù)據(jù) return searchValue ? loopData.filter((d: any) => d) : initialData.current; };

5、搜索后，禁止一級(jí)全選和取消全選

動(dòng)態(tài)控制table的選擇功能，需要使用rowSelection的getCheckboxProps。具體代碼如下。

const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //聲明一個(gè)變量，控制是否允許選擇，默認(rèn)為false//在rowSelection中添加getCheckboxPropsconst rowSelection = { selectedRowKeys, onSelect, getCheckboxProps: (record: any) => ({ disabled: selectAllDisabled,//true：禁止，false：允許 }), };//在搜索的時(shí)候設(shè)置 const loop = (searchValue: any) => { ... setSelectAllDisabled(searchValue ? true : false); //當(dāng)搜索內(nèi)容為空時(shí)，因?yàn)榛氐降氖浅跏贾担孕枰试S選擇，搜索內(nèi)容不為空時(shí)，禁止選擇 ... };

6、設(shè)置自動(dòng)展開(kāi)

前5步完成后，如果不需要設(shè)置自動(dòng)展開(kāi)，則該功能就可以到此結(jié)束。

設(shè)置自動(dòng)展開(kāi)，需要用到expandable中的onExpand以及expandedRowKeys

expandedRowKeys：展開(kāi)的行，控制屬性

onExpand：點(diǎn)擊展開(kāi)圖標(biāo)時(shí)觸發(fā)，（expanded，record）=> expanded：true：展開(kāi)，false：收起。record：操作的當(dāng)前行的數(shù)據(jù)

具體代碼如下：

const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //聲明變量設(shè)置展開(kāi)的行，默認(rèn)全都收起//table的 expandable添加 onExpand，expandedRowKeys<Table expandable={{ expandedRowRender, onExpand, expandedRowKeys, }}/>//搜索時(shí)改變狀態(tài)const loop = (searchValue: any) => { ... //有數(shù)據(jù)時(shí)自動(dòng)展開(kāi)所有搜索到的，無(wú)數(shù)據(jù)的時(shí)候默認(rèn)全部收起 setExpandedRowKeys( searchValue ? initialData.current.map((d: any) => d.key) : [] ); ... };//控制表格的展開(kāi)收起 const onExpand = (expanded: any, record: any) => { if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); //展開(kāi)時(shí)，將需要展開(kāi)的key添加到數(shù)組中 } else { setExpandedRowKeys( [...expandedRowKeys].filter((d: any) => d !== record.key)//收起時(shí)，將該key移除數(shù)組 ); } };三、優(yōu)化

一級(jí)選擇框有三種狀態(tài)，全選，二級(jí)選中某些個(gè)，未選中，三種狀態(tài)對(duì)應(yīng)不同的樣式，如下圖所示。

這種優(yōu)化，就需要設(shè)置rowSelection的renderCell（注意，rendercell在antd的4.1+版本才能生效），配合Checkbox進(jìn)行更改。具體代碼如下。

1、設(shè)置renderCell

將我們?cè)诘诙胶偷谖宀皆O(shè)置的onSelect以及getCheckboxProps隱藏，再配置renderCell

const rowSelection = { selectedRowKeys, // onSelect, // getCheckboxProps: (record: any) => ({ // disabled: selectAllDisabled, // }), renderCell: (checked: any, record: any) => { //當(dāng)前record.key對(duì)應(yīng)大初始化數(shù)據(jù)的一級(jí)所有數(shù)據(jù) let parentArr = initialData?.current?.find( (d: any) => d.key === record.key ); //從所有已經(jīng)選擇過(guò)的數(shù)據(jù)中過(guò)濾出在parentArr中的數(shù)據(jù) let checkArr = parentArr?.checkboxData?.filter( (item: any) => checkedJob.indexOf(item.key) > -1 ); return ( <Checkbox indeterminate={ parentArr?.checkboxData && !!checkArr?.length && checkArr.length < parentArr.checkboxData.length ? true : false } //比較 當(dāng)過(guò)濾后選中數(shù)據(jù)的長(zhǎng)度 < 初始化數(shù)據(jù)的長(zhǎng)度時(shí)，設(shè)置 indeterminate 狀態(tài)為true，否則為false onClick={(e) => onClick(e, record)} checked={checked} disabled={selectAllDisabled} ></Checkbox> ); }, };

2、設(shè)置onClick事件

onClick事件其實(shí)就是原來(lái)的onSelect，具體代碼如下

const onClick = (e: any, record: any) => { //存在搜索時(shí)，需要進(jìn)行處理selectParentData let initialParent = initialData.current.find( (d: any) => d.key === record.key ); let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (e.target.checked) { //向選中數(shù)組中添加key值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //從父級(jí)數(shù)組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } }; 四、完整代碼

Table+Checkbox模擬Tree完整代碼

import React, { useState, useRef, useEffect } from 'react';import { Table, Input, Checkbox } from 'antd';const { Search } = Input;export default () => { const initialData: any = useRef([]); const [data, setData] = useState([ { key: 1, title: '普通餐廳（中餐/日料/西餐廳）', checkboxData: [ { key: 12, title: '普通服務(wù)員' }, { key: 13, title: '收銀' }, { key: 14, title: '迎賓/接待' }, ], }, { key: 2, title: '零售/快消/服裝', checkboxData: [ { key: 17, title: '基礎(chǔ)店員' }, { key: 19, title: '收銀員' }, { key: 20, title: '理貨員' }, ], }, ]); useEffect(() => { initialData.current = [...data]; //設(shè)置初始化值 }, []); const [checkedJob, setCheckedJob] = useState([12]); //設(shè)置選擇的二級(jí) const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //設(shè)置選擇的行 const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //設(shè)置展開(kāi)的行 const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //選擇的時(shí)候，禁止全選 //搜索崗位時(shí)，進(jìn)行過(guò)濾 const loop = (searchValue: any) => { let loopData = initialData.current?.map((item: any) => { let parentKey = !!~item.title.indexOf(searchValue); let childrenData: any = []; if (item.checkboxData) { //如果存在二級(jí)，則進(jìn)行二級(jí)的循環(huán),過(guò)濾出搜索到的value childrenData = item.checkboxData.filter( (d: any) => !!~d.title.indexOf(searchValue) ); } //1.如果一級(jí)有，二級(jí)沒(méi)有，則展示一級(jí)下所有的二級(jí) //2.如果一級(jí)沒(méi)有，二級(jí)有，則只展示存在的二級(jí)以及對(duì)應(yīng)的一級(jí) //3.如果一級(jí)有，二級(jí)有，則展示則存在的二級(jí)以及對(duì)應(yīng)的一級(jí) //4.如果一級(jí)沒(méi)有，二級(jí)也沒(méi)有，則不展示 if (parentKey && !childrenData.length) { return { title: item.title, key: item.key, checkboxData: item.checkboxData, }; } else if ((!parentKey || parentKey) && childrenData.length) { return { title: item.title, key: item.key, checkboxData: childrenData, }; } else { } }); setSelectAllDisabled(searchValue ? true : false); //有數(shù)據(jù)時(shí)自動(dòng)展開(kāi)所有搜索到的，無(wú)數(shù)據(jù)的時(shí)候默認(rèn)全部收起 setExpandedRowKeys( searchValue ? initialData.current.map((d: any) => d.key) : [] ); return searchValue ? loopData.filter((d: any) => d) : initialData.current; }; const isContained = (a: any, b: any) => { if (!(a instanceof Array) || !(b instanceof Array)) return false; if (a.length < b.length) return false; var aStr = a.toString(); for (var i = 0, len = b.length; i < len; i++) { if (aStr.indexOf(b[i]) == -1) return false; } return true; }; const checkChange = (e: any) => { let praentRowsKey: any; //找到點(diǎn)擊child到一級(jí)key initialData.current.forEach((v: any) => { if (v.checkboxData.find((d: any) => d.key === e.target.value)) { praentRowsKey = v.key; } }); if (e.target.checked) { //選中時(shí) 設(shè)置當(dāng)前的child數(shù)組 let newCheckedJob = [...checkedJob, e.target.value]; setCheckedJob(newCheckedJob); //判斷當(dāng)前child的內(nèi)容是否全部被選中，如果全部選中，則需要設(shè)置selectedRowKeys //praentRowsKey下的所有子元素 let childArr = initialData.current .find((d: any) => d.key === praentRowsKey) ?.checkboxData?.map((i: any) => i.key); // 為當(dāng)前選擇之后的新數(shù)組 if (isContained(newCheckedJob, childArr)) { //全部包含，設(shè)置父級(jí) setSelectedRowKeys([...selectedRowKeys, praentRowsKey]); } } else { //取消選中 設(shè)置當(dāng)前的child數(shù)組 setCheckedJob( [...checkedJob].filter((d: number) => d !== e.target.value) ); //判斷當(dāng)前父級(jí)中是否存在praentRowsKey，存在則去除 if (!!~selectedRowKeys.indexOf(praentRowsKey)) { setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== praentRowsKey) ); } } }; //父節(jié)點(diǎn)變化時(shí)，進(jìn)行的操作 // const onSelect = (record: any, selected: any) => { // //存在搜索時(shí)，需要進(jìn)行處理selectParentData // let initialParent = initialData.current.find( // (d: any) => d.key === record.key // ); // let selectParentData = initialParent.checkboxData // ? initialParent.checkboxData.map((d: any) => d.key) // : []; // if (selected) { // //向選中數(shù)組中添加key值 // setSelectedRowKeys([...selectedRowKeys, record.key]); // //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾添加 // setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); // } else { // //從父級(jí)數(shù)組中移除key值 // setSelectedRowKeys( // [...selectedRowKeys].filter((d: any) => d !== record.key) // ); // //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾掉 // let newArr: any = []; // [...checkedJob].forEach((v) => { // if (selectParentData.indexOf(v) === -1) { // newArr.push(v); // } // }); // setCheckedJob(newArr); // } // }; //控制表格的展開(kāi)收起 const onExpand = (expanded: any, record: any) => { //expanded： true展開(kāi)，false：關(guān)閉 if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); } else { setExpandedRowKeys( [...expandedRowKeys].filter((d: any) => d !== record.key) ); } }; const onClick = (e: any, record: any) => { //存在搜索時(shí)，需要進(jìn)行處理selectParentData let initialParent = initialData.current.find( (d: any) => d.key === record.key ); let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (e.target.checked) { //向選中數(shù)組中添加key值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //從父級(jí)數(shù)組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數(shù)組，將selectParentData中的數(shù)據(jù)全部過(guò)濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } }; const expandedRowRender = (record: any) => { return ( <div style={{ paddingLeft: 50, boxSizing: 'border-box' }}> <p>請(qǐng)選擇崗位，或勾選類別全選崗位</p> <div> <Checkbox.Group value={checkedJob}> {record.checkboxData.map((item: any) => { return ( <Checkbox value={item.key} key={item.key} onChange={checkChange} > {item.title} </Checkbox> ); })} </Checkbox.Group> </div> </div> ); }; const rowSelection = { selectedRowKeys, // onSelect, // getCheckboxProps: (record: any) => ({ // disabled: selectAllDisabled, // }), renderCell: (checked: any, record: any) => { //當(dāng)前record.key對(duì)應(yīng)大初始化數(shù)據(jù)的一級(jí)所有數(shù)據(jù) let parentArr = initialData?.current?.find( (d: any) => d.key === record.key ); //從所有已經(jīng)選擇過(guò)的數(shù)據(jù)中過(guò)濾出在parentArr中的數(shù)據(jù) let checkArr = parentArr?.checkboxData?.filter( (item: any) => checkedJob.indexOf(item.key) > -1 ); return ( <Checkbox indeterminate={ parentArr?.checkboxData && !!checkArr?.length && checkArr.length < parentArr.checkboxData.length ? true : false } //比較 當(dāng)過(guò)濾后選中數(shù)據(jù)的長(zhǎng)度 < 初始化數(shù)據(jù)的長(zhǎng)度時(shí)，設(shè)置 indeterminate 狀態(tài)為true，否則為false onClick={(e) => onClick(e, record)} checked={checked} disabled={selectAllDisabled} ></Checkbox> ); }, }; return ( <div style={{ background: '#fff', padding: 24, boxSizing: 'border-box', width: 982, }} > <Search placeholder='請(qǐng)輸入崗位名稱' onSearch={(value) => { console.log(loop(value)); setData(loop(value)); }} /> <Table showHeader={false} columns={columns} expandable={{ expandedRowRender, onExpand, expandedRowKeys, }} dataSource={data} pagination={false} rowSelection={rowSelection} /> </div> );};const columns = [{ title: 'title', dataIndex: 'title', key: 'title' }];

以上這篇Ant design vue table 單擊行選中 勾選checkbox教程就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。