欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ant design vue table 單擊行選中 勾選checkbox教程

 更新時(shí)間:2020年10月24日 14:26:26   作者:陽(yáng)光下那抹高傲的輕笑  
這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

期望: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)展開所有二級(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í)沒有,則展示一級(jí)下所有的二級(jí)    //如果一級(jí)沒有,二級(jí)有,則只展示存在的二級(jí)以及對(duì)應(yīng)的一級(jí)   //如果一級(jí)有,二級(jí)有,則展示存在的二級(jí)以及對(duì)應(yīng)的一級(jí)  //如果一級(jí)沒有,二級(jí)也沒有,則不展示
  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中添加getCheckboxProps
const 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)榛氐降氖浅跏贾?,所以需要它允許選擇,搜索內(nèi)容不為空時(shí),禁止選擇
 ...
 };

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

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

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

expandedRowKeys:展開的行,控制屬性

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

具體代碼如下:

const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //聲明變量設(shè)置展開的行,默認(rèn)全都收起

//table的 expandable添加 onExpand,expandedRowKeys
<Table
 expandable={{
 expandedRowRender,
 onExpand,
 expandedRowKeys,
 }}
/>

//搜索時(shí)改變狀態(tài)
const loop = (searchValue: any) => {
 ...
 //有數(shù)據(jù)時(shí)自動(dòng)展開所有搜索到的,無(wú)數(shù)據(jù)的時(shí)候默認(rèn)全部收起
 setExpandedRowKeys(
  searchValue ? initialData.current.map((d: any) => d.key) : []
 );
 ...
 };

//控制表格的展開收起
 const onExpand = (expanded: any, record: any) => {
 if (expanded) {
  setExpandedRowKeys([...expandedRowKeys, record.key]); //展開時(shí),將需要展開的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è)置展開的行
 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í)沒有,則展示一級(jí)下所有的二級(jí)
  //2.如果一級(jí)沒有,二級(jí)有,則只展示存在的二級(jí)以及對(duì)應(yīng)的一級(jí)
  //3.如果一級(jí)有,二級(jí)有,則展示則存在的二級(jí)以及對(duì)應(yīng)的一級(jí)
  //4.如果一級(jí)沒有,二級(jí)也沒有,則不展示
  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)展開所有搜索到的,無(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);
 //  }
 // };

 //控制表格的展開收起
 const onExpand = (expanded: any, record: any) => {
 //expanded: true展開,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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論