Ant design vue table 單擊行選中 勾選checkbox教程
最近了解Ant design 設計table 單擊行選中checkedbox功能，相比于element的 @row-click 再觸發toggleRowSelection，ant design的api就沒那么清晰了，言歸正傳
期望：Ant design table 單擊行選中 勾選checkedbox
實現：
單選：
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; } } } }
補充知識：使用Ant Design的Table和Checkbox模擬Tree
一、小功能大需求先看下設計圖：
需求如下：
1、一級選中（取消選中），該一級下的二級全部選中（取消選中）
2、二級全選，對應的一級選中，二級未全選中，對應的一級不選中
3、支持搜索，只搜索二級數據，并且只展示搜索到的數據以及對應的一級title，如：搜索“店員”，此時一級只展示咖啡廳....其他一級隱藏，二級只展示店員，其他二級隱藏
4、搜索出來的數據，一級不可選中，即不允許全選，搜索框清空時，回歸初始化狀態
5、搜索后，自動展開所有二級，默認情況下收起所有二級
看到圖的時候，第一反應就是使用Tree就能搞定，但是翻閱了文檔后，發現Tree并不能全部完成，所以就只能使用其他組件進行拼裝，最后發現使用Table和Checkbox可以完美實現。
二、逐步完成需求如果不想看這些，可直接到最后，有完整代碼。。。。。。
1、頁面構建
這個就不用多說，只是一個簡單的Table嵌套Checkbox，具體可去查看文檔，直接貼代碼，因為是布局，所有可以忽略代碼中的事件。
注意一點：因為搜索時，會改變數據，所以需要將初始化的數據進行保存。
import React, { useState, useRef, useEffect } from 'react';import { Table, Input, Checkbox } from 'antd';const { Search } = Input;export default () => { const initialData: any = useRef([]); //使用useRef創建initialData const [data, setData] = useState([ { key: 1, title: '普通餐廳（中餐/日料/西餐廳）', checkboxData: [ { key: 12, title: '普通服務員' }, { key: 13, title: '收銀' }, { key: 14, title: '迎賓/接待' }, ], }, { key: 2, title: '零售/快消/服裝', checkboxData: [ { key: 17, title: '基礎店員' }, { key: 19, title: '收銀員' }, { key: 20, title: '理貨員' }, ], }, ]); useEffect(() => { initialData.current = [...data]; //設置初始化值 }, []); const [checkedJob, setCheckedJob] = useState([]); //設置子級中選擇的類 const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //設置選擇的行 const expandedRowRender = (record: any) => { return ( <div style={{ paddingLeft: 50, boxSizing: 'border-box' }}> <p>請選擇崗位，或勾選類別全選崗位</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='請輸入崗位名稱' 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、一級選中（取消全選）
當一級選中（取消全選）時，需要更新對應二級選項的狀態。在antd文檔中，使用rowSelection的onSelect，可以設置選擇/取消選擇某行的回調。
onSelect：（record，selected）=> record：操作當前行的數據，selected：true：全選，false：取消全選
注意：當全選時，不能直接添加當前一級下的所有二級，需要過濾掉當前已經選中的二級
具體邏輯如下代碼：
//首選在rowSelection配置中添加onSelectconst rowSelection = { selectedRowKeys, onSelect };//一級全選或者取消的邏輯const onSelect = (record: any, selected: any) => { //因為存在搜索，所以需要使用我們的初始化數據，找到當前record.key在初始化數據中對應的數據 let initialParent = initialData.current.find( (d: any) => d.key === record.key );//初始化數據中對應的二級數據 let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (selected) { //全選 //向selectRowKeys添加選中的值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數組，將selectParentData中的數據全部過濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //取消全選 //從父級數組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數組，將selectParentData中的數據全部過濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } };
3、二級選中或取消選中邏輯
二級選中或者取消比較簡單，只要注意在選中時，如何去考慮是否所有二級全部選中即可。具體代碼如下。
//判斷b數組中的數據是否全部在a數組中 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; };//設置checkbox的onChange事件 const checkChange = (e: any) => { let praentRowsKey: any; //找到選中的二級對應的父級key initialData.current.forEach((v: any) => { if (v.checkboxData.find((d: any) => d.key === e.target.value)) { praentRowsKey = v.key; } }); if (e.target.checked) { //選中時 設置當前的check數組 let newCheckedJob = [...checkedJob, e.target.value]; setCheckedJob(newCheckedJob); //判斷當前二級的內容是否全部被選中，如果全部選中，則需要設置selectedRowKeys //praentRowsKey下的所有子元素 let childArr = initialData.current .find((d: any) => d.key === praentRowsKey) ?.checkboxData?.map((i: any) => i.key); // 為當前選擇之后的新數組 if (isContained(newCheckedJob, childArr)) { //全部包含，設置父級 setSelectedRowKeys([...selectedRowKeys, praentRowsKey]); } } else { //取消選中 設置當前的child數組 setCheckedJob( [...checkedJob].filter((d: number) => d !== e.target.value) ); //判斷當前父級中是否存在praentRowsKey，存在則去除 if (!!~selectedRowKeys.indexOf(praentRowsKey)) { setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== praentRowsKey) ); } } };
4、搜索過濾
前3步驟完成后，目前來說，正常的一級二級聯動已經完成，現在進行第4步，搜索過濾。
簡單的說，搜索的時候，只要改變我們的data，就可以重新渲染Table，這樣就可以達成搜索過濾的效果。具體代碼如下
//Search組件搜索時，觸發更改data<Search placeholder='請輸入崗位名稱' onSearch={(value) => { setData(loop(value)); }}/> //搜索崗位時，進行過濾 const loop = (searchValue: any) => { let loopData = initialData.current?.map((item: any) => {//判斷一級是否包含該搜索內容 let parentKey = !!~item.title.indexOf(searchValue); let childrenData: any = []; if (item.checkboxData) { //如果存在二級，則進行二級的循環,過濾出搜索到的value childrenData = item.checkboxData.filter( (d: any) => !!~d.title.indexOf(searchValue) ); } //如果一級有，二級沒有，則展示一級下所有的二級 //如果一級沒有，二級有，則只展示存在的二級以及對應的一級 //如果一級有，二級有，則展示存在的二級以及對應的一級 //如果一級沒有，二級也沒有，則不展示 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{} });//搜索的值不為空時，返回搜索過濾后都數據（因為map出來的數據中有undefined，所以需要再次進行過濾），為空時返回初始化數據 return searchValue ? loopData.filter((d: any) => d) : initialData.current; };
5、搜索后，禁止一級全選和取消全選
動態控制table的選擇功能，需要使用rowSelection的getCheckboxProps。具體代碼如下。
const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //聲明一個變量，控制是否允許選擇，默認為false//在rowSelection中添加getCheckboxPropsconst rowSelection = { selectedRowKeys, onSelect, getCheckboxProps: (record: any) => ({ disabled: selectAllDisabled,//true：禁止，false：允許 }), };//在搜索的時候設置 const loop = (searchValue: any) => { ... setSelectAllDisabled(searchValue ? true : false); //當搜索內容為空時，因為回到的是初始值，所以需要它允許選擇，搜索內容不為空時，禁止選擇 ... };
6、設置自動展開
前5步完成后，如果不需要設置自動展開，則該功能就可以到此結束。
設置自動展開，需要用到expandable中的onExpand以及expandedRowKeys
expandedRowKeys：展開的行，控制屬性
onExpand：點擊展開圖標時觸發，（expanded，record）=> expanded：true：展開，false：收起。record：操作的當前行的數據
具體代碼如下：
const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //聲明變量設置展開的行，默認全都收起//table的 expandable添加 onExpand，expandedRowKeys<Table expandable={{ expandedRowRender, onExpand, expandedRowKeys, }}/>//搜索時改變狀態const loop = (searchValue: any) => { ... //有數據時自動展開所有搜索到的，無數據的時候默認全部收起 setExpandedRowKeys( searchValue ? initialData.current.map((d: any) => d.key) : [] ); ... };//控制表格的展開收起 const onExpand = (expanded: any, record: any) => { if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); //展開時，將需要展開的key添加到數組中 } else { setExpandedRowKeys( [...expandedRowKeys].filter((d: any) => d !== record.key)//收起時，將該key移除數組 ); } };三、優化
一級選擇框有三種狀態，全選，二級選中某些個，未選中，三種狀態對應不同的樣式，如下圖所示。
這種優化，就需要設置rowSelection的renderCell（注意，rendercell在antd的4.1+版本才能生效），配合Checkbox進行更改。具體代碼如下。
1、設置renderCell
將我們在第二步和第五步設置的onSelect以及getCheckboxProps隱藏，再配置renderCell
const rowSelection = { selectedRowKeys, // onSelect, // getCheckboxProps: (record: any) => ({ // disabled: selectAllDisabled, // }), renderCell: (checked: any, record: any) => { //當前record.key對應大初始化數據的一級所有數據 let parentArr = initialData?.current?.find( (d: any) => d.key === record.key ); //從所有已經選擇過的數據中過濾出在parentArr中的數據 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 } //比較 當過濾后選中數據的長度 < 初始化數據的長度時，設置 indeterminate 狀態為true，否則為false onClick={(e) => onClick(e, record)} checked={checked} disabled={selectAllDisabled} ></Checkbox> ); }, };
2、設置onClick事件
onClick事件其實就是原來的onSelect，具體代碼如下
const onClick = (e: any, record: any) => { //存在搜索時，需要進行處理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) { //向選中數組中添加key值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數組，將selectParentData中的數據全部過濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //從父級數組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數組，將selectParentData中的數據全部過濾掉 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: '普通服務員' }, { key: 13, title: '收銀' }, { key: 14, title: '迎賓/接待' }, ], }, { key: 2, title: '零售/快消/服裝', checkboxData: [ { key: 17, title: '基礎店員' }, { key: 19, title: '收銀員' }, { key: 20, title: '理貨員' }, ], }, ]); useEffect(() => { initialData.current = [...data]; //設置初始化值 }, []); const [checkedJob, setCheckedJob] = useState([12]); //設置選擇的二級 const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //設置選擇的行 const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //設置展開的行 const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //選擇的時候，禁止全選 //搜索崗位時，進行過濾 const loop = (searchValue: any) => { let loopData = initialData.current?.map((item: any) => { let parentKey = !!~item.title.indexOf(searchValue); let childrenData: any = []; if (item.checkboxData) { //如果存在二級，則進行二級的循環,過濾出搜索到的value childrenData = item.checkboxData.filter( (d: any) => !!~d.title.indexOf(searchValue) ); } //1.如果一級有，二級沒有，則展示一級下所有的二級 //2.如果一級沒有，二級有，則只展示存在的二級以及對應的一級 //3.如果一級有，二級有，則展示則存在的二級以及對應的一級 //4.如果一級沒有，二級也沒有，則不展示 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); //有數據時自動展開所有搜索到的，無數據的時候默認全部收起 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; //找到點擊child到一級key initialData.current.forEach((v: any) => { if (v.checkboxData.find((d: any) => d.key === e.target.value)) { praentRowsKey = v.key; } }); if (e.target.checked) { //選中時 設置當前的child數組 let newCheckedJob = [...checkedJob, e.target.value]; setCheckedJob(newCheckedJob); //判斷當前child的內容是否全部被選中，如果全部選中，則需要設置selectedRowKeys //praentRowsKey下的所有子元素 let childArr = initialData.current .find((d: any) => d.key === praentRowsKey) ?.checkboxData?.map((i: any) => i.key); // 為當前選擇之后的新數組 if (isContained(newCheckedJob, childArr)) { //全部包含，設置父級 setSelectedRowKeys([...selectedRowKeys, praentRowsKey]); } } else { //取消選中 設置當前的child數組 setCheckedJob( [...checkedJob].filter((d: number) => d !== e.target.value) ); //判斷當前父級中是否存在praentRowsKey，存在則去除 if (!!~selectedRowKeys.indexOf(praentRowsKey)) { setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== praentRowsKey) ); } } }; //父節點變化時，進行的操作 // const onSelect = (record: any, selected: any) => { // //存在搜索時，需要進行處理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) { // //向選中數組中添加key值 // setSelectedRowKeys([...selectedRowKeys, record.key]); // //更新child數組，將selectParentData中的數據全部過濾添加 // setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); // } else { // //從父級數組中移除key值 // setSelectedRowKeys( // [...selectedRowKeys].filter((d: any) => d !== record.key) // ); // //更新child數組，將selectParentData中的數據全部過濾掉 // let newArr: any = []; // [...checkedJob].forEach((v) => { // if (selectParentData.indexOf(v) === -1) { // newArr.push(v); // } // }); // setCheckedJob(newArr); // } // }; //控制表格的展開收起 const onExpand = (expanded: any, record: any) => { //expanded： true展開，false：關閉 if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); } else { setExpandedRowKeys( [...expandedRowKeys].filter((d: any) => d !== record.key) ); } }; const onClick = (e: any, record: any) => { //存在搜索時，需要進行處理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) { //向選中數組中添加key值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數組，將selectParentData中的數據全部過濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //從父級數組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數組，將selectParentData中的數據全部過濾掉 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>請選擇崗位，或勾選類別全選崗位</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) => { //當前record.key對應大初始化數據的一級所有數據 let parentArr = initialData?.current?.find( (d: any) => d.key === record.key ); //從所有已經選擇過的數據中過濾出在parentArr中的數據 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 } //比較 當過濾后選中數據的長度 < 初始化數據的長度時，設置 indeterminate 狀態為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='請輸入崗位名稱' 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教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備