极乐门资源网

Ant design vue table 单击行选中 勾选checkbox教程
网络编程 2024/11/18 佚名
2 0
极乐门资源网 Design By www.ioogu.com

最近了解Ant design 设计table 单击行选中checkedbox功能，相比于element的 @row-click 再触发toggleRowSelection，ant design的api就没那么清晰了，言归正传

期望：Ant design table 单击行选中 勾选checkedbox

实现：

Ant design vue table 单击行选中 勾选checkbox教程

单选： 

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

一、小功能大需求

先看下设计图：

Ant design vue table 单击行选中 勾选checkbox教程

需求如下：

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
  "htmlcode">



//判断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)
  "htmlcode">



//Search组件搜索时，触发更改data<Search
 placeholder="请输入岗位名称"
 onSearch={(value) => {
  setData(loop(value));
 }}
/>
 //搜索岗位时，进行过滤
 const loop = (searchValue: any) => {
 let loopData = initialData.current"htmlcode">



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 "htmlcode">



const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //声明变量设置展开的行，默认全都收起

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

//搜索时改变状态
const loop = (searchValue: any) => {
 ...
 //有数据时自动展开所有搜索到的，无数据的时候默认全部收起
 setExpandedRowKeys(
  searchValue "" src="/UploadFiles/2021-04-02/20201024142206.jpg">












这种优化，就需要设置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"htmlcode">



const onClick = (e: any, record: any) => {
 //存在搜索时，需要进行处理selectParentData
 let initialParent = initialData.current.find(
  (d: any) => d.key === record.key
 );
 let selectParentData = initialParent.checkboxData
  "htmlcode">



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"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"#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教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
Ant,design,vue,table单击行选中,勾选checkbox

                                     

                                
极乐门资源网 Design By www.ioogu.com

                            

                        

                        

                            

                                极乐门资源网
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
极乐门资源网 Design By www.ioogu.com

                        

                            

                                
                                
                                    评论“Ant design vue table 单击行选中 勾选checkbox教程”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无Ant design vue table 单击行选中 勾选checkbox教程的评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.ioogu.com
                                            
                                                极乐门资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            139,976影音资源
                                        

                                        

                                            144,792福利资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com