Ant design vue table 單擊行選中 勾選checkbox教程
更新時間：2020年10月24日 14:26:26 作者：陽光下那抹高傲的輕笑
這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近了解Ant design 設計table 單擊行選中checkedbox功能，相比于element的 @row-click 再觸發(fā)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、搜索出來的數據，一級不可選中，即不允許全選，搜索框清空時，回歸初始化狀態(tài)
5、搜索后，自動展開所有二級，默認情況下收起所有二級
看到圖的時候，第一反應就是使用Tree就能搞定，但是翻閱了文檔后，發(fā)現Tree并不能全部完成，所以就只能使用其他組件進行拼裝，最后發(fā)現使用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創(chuàng)建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、一級選中（取消全選）
當一級選中（取消全選）時，需要更新對應二級選項的狀態(tài)。在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步驟完成后，目前來說，正常的一級二級聯(lián)動已經完成，現在進行第4步，搜索過濾。
簡單的說，搜索的時候，只要改變我們的data，就可以重新渲染Table，這樣就可以達成搜索過濾的效果。具體代碼如下
//Search組件搜索時，觸發(fā)更改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) {
//如果存在二級，則進行二級的循環(huán),過濾出搜索到的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、搜索后，禁止一級全選和取消全選
動態(tài)控制table的選擇功能，需要使用rowSelection的getCheckboxProps。具體代碼如下。
const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //聲明一個變量，控制是否允許選擇，默認為false
//在rowSelection中添加getCheckboxProps
const 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：點擊展開圖標時觸發(fā)，（expanded，record）=> expanded：true：展開，false：收起。record：操作的當前行的數據
具體代碼如下：
const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //聲明變量設置展開的行，默認全都收起
//table的 expandable添加 onExpand，expandedRowKeys
<Table
expandable={{
expandedRowRender,
onExpand,
expandedRowKeys,
}}
/>
//搜索時改變狀態(tài)
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移除數組
);
}
};
三、優(yōu)化
一級選擇框有三種狀態(tài)，全選，二級選中某些個，未選中，三種狀態(tài)對應不同的樣式，如下圖所示。
這種優(yōu)化，就需要設置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 狀態(tài)為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) {
//如果存在二級，則進行二級的循環(huán),過濾出搜索到的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)
);
}
}
};
//父節(jié)點變化時，進行的操作
// 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 狀態(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="請輸入崗位名稱"
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教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue?webpack的基本使用,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了如何去掉ElementUI Table的hover變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最近公司新啟動了個項目，用的是vue框架在做,下面這篇文章主要給大家介紹了關于vue實現token登錄驗證的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
下面小編就為大家分享一篇基于vue2.0動態(tài)組件及render詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Element 默認勾選表格 toggleRowSelection的實現
這篇文章主要介紹了Element 默認勾選表格 toggleRowSelection的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了一個例子，幫助大輕松學會Vue.js，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要給大家介紹了關于vue.js中Vue-router 2.0基礎實踐的相關資料，其中包括vue-router 2.0的基礎用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關知識，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
這篇文章主要為大家詳細介紹了基于Vue2.0的分頁組件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文主要給大家介紹如何vue實現圖片拖拽及鼠標滾輪放大縮小,文中有詳細的代碼供大家參考,對我們的學習或工作有一定的幫助,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了詳解Vue.js 可拖放文本框組件的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03