封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等

一般情况下,我们在页面组件里面都会使用state创建对应的分页参数和分页方法然后传入对应的组件内部,再或者选择行、全选等等,这都会在每一个组件中徒增大量的代码行数,所以简单整理了一下这个只是针对于处理逻辑的组件:
useTableCom

import { map, uniqBy } from 'lodash-es'
import { useState } from 'react'
// 表格分页参数默认值
const cur = 1
const pagesize = 10
export default function useRowSelection({ rowKey = 'id', getTable = () => {} }) {// 表格选中的id (rowKey)const [selectedRowKeys, setSelectedRowKeys] = useState([])// 当前选中的行元素对象const [selectedList, setSelectedList] = useState([])const [pageNum, setCurrent] = useState(cur)const [pageSize, setPageSize] = useState(pagesize)// 记录当前表格查询条件const [curparams, setcurparams] = useState({})// 表格多选const rowSelection = {// 当前选中行listselectedRowKeys,// 禁用选中getCheckboxProps: record => ({disabled: record.disabled,}),// onChange: (keys, selectedRows, info) => {//     console.log(keys, selectedRows, info)// },// 单选按钮onSelect: (record, selected) => {let selectedData = selectedList// 选中 pushif (selected) {selectedData.push(record)} else {// 未选中 spliceselectedData.splice(selectedData.findIndex(item => item[rowKey] === record[rowKey]),1,)}selectedData = uniqBy(selectedData, rowKey)setSelectedList(selectedData)setSelectedRowKeys(map(selectedData, rowKey))},// 全选按钮onSelectAll: (selected, selectedRows, changeRows) => {let selectedData = selectedListif (selected) {selectedData = selectedData.concat(changeRows)} else {selectedData = selectedData.filter(x => !changeRows.find(change => change[rowKey] === x[rowKey]))}selectedData = uniqBy(selectedData, rowKey)setSelectedList(selectedData)setSelectedRowKeys(map(selectedData, rowKey))},}// 重置当前选中项const initSelect = () => {setSelectedRowKeys([])setSelectedList([])}// 这个可以页面初始化或者重置查询条件的时候使用const changeCurrentAndPageSize = async (pageNum = cur, pageSize = pagesize, params = {}) => {setCurrent(pageNum)setPageSize(pageSize)setcurparams(params)getTable({ pageNum, pageSize, ...params })}// 点击跳转页码或者下一页的时候const paginationChange = (p, ps) => {if (ps !== pageSize) {changeCurrentAndPageSize(1, ps, curparams)} else {changeCurrentAndPageSize(p, ps, curparams)}}// 设置当前分页参数 const changeCurrentAndPageSizeNum = (pageNum = cur, pageSize = pagesize) => {setCurrent(pageNum)setPageSize(pageSize)}return {// 当前页pageNum,changeCurrentAndPageSizeNum,setCurrent,// 当前页显示条数pageSize,setPageSize,// 改变当前页码changeCurrentAndPageSize,// 给table组件的改变页面的方法paginationChange,// 选中行方法rowSelection,// 当前选中的 rowKey listselectedRowKeys,// 当前选中的 对象 listselectedList,// 设置当前选中的 rowKey listsetSelectedRowKeys,// 设置当前选中的 对象 listsetSelectedList,// 初始化选中框initSelect,}
}

使用的时候我们我们只需要传入当前list每一行的key以及,对应的表格查询方法即可。

使用:

const getTable = async (obj = {}) => {setList([])setTotal(0)setLoading(true)const res = await IPServe.aaa(obj)if (res && res.code === 200) {const { data = [], total = 0 } = res.data || {}setList(data)setTotal(total)}setLoading(false)}
const {pageNum,pageSize,changeCurrentAndPageSize,// rowSelection,// selectedRowKeys,// initSelect,paginationChange,} = useRowSelection({rowKey: 'id',getTable,})
	form表单收集查询参数即可const search = async () => {changeCurrentAndPageSize(1, 10, {...form.getFieldsValue(),})}
    const reset = () => {form.resetFields()changeCurrentAndPageSize(1, 10, {...form.getFieldsValue(),})}
<myTableProps={{title: '列表',columns: [],dataSource: [],showPagination: true,rowKey: 'id',}}pageProps={{ total, pageNum, onChange: paginationChange, pageSize }}/>

当然我们也可以将total也搞到组件里面。
myTable是自己封装的组件,当然table组件无非就这些参数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/824307.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BUUCTF——[GXYCTF2019]BabyUpload

BUUCTF——[GXYCTF2019]BabyUpload 1.上传嘛&#xff0c;直接丢正常的jpg文件进服务器 2.发现可以正常上传&#xff0c;并且回显出来啦文件上传的路径 /var/www/html/upload/7df22610744ec51e9cb7a8a8eb674374/1111.jpg 3.尝试上传一句话木马 <?php eval($POST[123456]…

HDFS详解(Hadoop)

Hadoop 分布式文件系统&#xff08;Hadoop Distributed File System&#xff0c;HDFS&#xff09;是 Apache Hadoop 生态系统的核心组件之一&#xff0c;它是设计用于存储大规模数据集并运行在廉价硬件上的分布式文件系统。 1. 分布式存储&#xff1a; HDFS 将文件分割成若干块…

Python机器学习项目开发实战:深度神经网络

注意&#xff1a;本文提供下载的教程&#xff0c;与以下文章的思路有相同点&#xff0c;也有不同点&#xff0c;最终目标只是让读者从多维度去熟练掌握本知识点。 在Python中开发一个基于深度神经网络的机器学习项目&#xff0c;可以涉及到许多不同的步骤和技术。以下是一个简化…

「 网络安全常用术语解读 」漏洞利用交换VEX详解

漏洞利用交换&#xff08;Vulnerability Exploitability eXchange&#xff0c;简称VEX&#xff09;是一个信息安全领域的标准&#xff0c;旨在提供关于软件漏洞及其潜在利用的实时信息。根据美国政府发布的用例(PDF)&#xff0c;由美国政府开发的漏洞利用交换(VEX)使供应商和用…

[ LeetCode ] 题刷刷(Python)-第26题:删除有序数组中的重复项

题目描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &…

工业电脑在ESOP工作站行业应用

ESOP工作站行业应用 项目背景 E-SOP是实现作业指导书电子化&#xff0c;并统一管理和集中控制的一套管理信息平台。信迈科技的ESOP终端是一款体积小巧功能齐全的高性价比工业电脑&#xff0c;上层通过网络与MES系统连接&#xff0c;下层连接显示器展示作业指导书。ESOP控制终…

基于开源IM即时通讯框架MobileIMSDK:RainbowChat v11.5版已发布

关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架&#xff0c;超轻量级、高度提炼&#xff0c;一套API优雅支持UDP 、TCP 、WebSocket 三种协议&#xff0c;支持iOS、Android、H5、小程序、Uniapp、标准Java平台&#xff0c;服务端基于Netty编写。 工…

MAC 终端命令

Command Shift . 显示隐藏文件夹 环境变量路径 ~/.zshrc ~/.bash_profile 每次打开都需要 source 安装Homebrew xcode安装 xcode-select --install brew安装 /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)” 检查是否…

朗思-我的家园正式上线:朗思科技Agent工具软件--人人拥有“Ai-机器人”

4月16日&#xff0c;朗思科技正式发布"朗思-我的家园"。朗思科技是国内领先的Ai Agent智能自动化工具软件产品及方案的提供商&#xff0c;始终坚持自主研发&#xff0c;全面支持国产信创&#xff0c;不断加快产品创新迭代。基于技术领先性和战略前瞻性&#xff0c;其…

【小白学机器学习13】一文理解假设检验的反证法,H0如何设计的,什么时候用左侧检验和右侧检验,等各种关于假设检验的基础知识

目录 前言&#xff1a; 目标 1 什么叫 假设检验 1.1 假设检验的定义 1.1.1 来自百度百科 1.1.2 维基百科 1.2 假设检验的最底层逻辑&#xff1a;是反证法思想 1.3 假设检验的底层构造&#xff1a;小概率反证法思想 2 什么叫反证法 2.1 反证法的概念 2.1.1 来自百度…

ES解构的使用

文章目录 1 概念2 数组解构3 对象结构 1 概念 解构是ES6中引入的一个新语法特性&#xff0c;它是一种按照一定模式从数组或对象中提取值&#xff0c;对变量进行赋值的行为。解构可以被视为一种结构化赋值方法&#xff0c;用于简化从数据结构&#xff08;如数组或对象&#xff…

MFC下CPictureCtrl控件基于鼠标左键坐标的直线绘图

本文仅供学习交流&#xff0c;严禁用于商业用途&#xff0c;如本文涉及侵权请及时联系本人将于及时删除 目录 1.创建自定义类CMyPictureCtrl 2.布局Dlg 3.实验代码 4.运行结果 在基于对话框的MFC应用程序中&#xff0c;通过鼠标操作获取坐标并在CPictureCtrl控件中使用Lin…

【软件测试】单元测试+集成测试+系统测试

以下是来自“文心一言”搜索的回答 单元测试 单元测试是软件开发中的一种测试方法&#xff0c;用于对软件中的最小可测试单元进行测试。这些最小单元通常是函数、方法或类等代码片段。单元测试的目的是验证每个单元的代码是否按预期工作&#xff0c;确保其功能正确&#xff0…

极化码的编码

引言 极化码是一种比较特殊的线性分组码,同时其还是一种信道专属编码,在极化码的编码构造方案中,每种不同的信道都有属于自己特定的编码构造方式,而当给定一种具体的信道环境时,极化码的构造方案还是与其他的线性分组码比较的类似,极化码的编码码字也是通过信息序列乘以生…

05 MySQL 之 表的约束、视图、事务

1. CONSTRAINT 约束 创建表时&#xff0c;可以给表的字段添加约束&#xff0c;可以保证数据的完整性、有效性。比如大家上网注册用户时常见的&#xff1a;用户名不能为空。对不起&#xff0c;用户名已存在。等提示信息。 约束包括&#xff1a; 非空约束&#xff1a;not null检…

通过Idea部署Tomcat服务器

1.在idea中创建项目 有maven构建工具就创建maven&#xff0c;没有就正常创建一个普通的java程序 创建普通java项目 2.添加框架 3.配置 Tomcat 注意&#xff1a;创建web项目后我们需要配置tomcat才能运行&#xff0c;下面我们来进行配置。 4.添加部署 回到服务器 5.完善配置 6…

小程序如何优化搜索排名,获取曝光

在移动互联网时代&#xff0c;小程序以其便捷、轻量级的特点&#xff0c;逐渐成为用户获取服务的重要渠道。然而&#xff0c;小程序数量众多&#xff0c;如何让自己的小程序在搜索中脱颖而出&#xff0c;获取更多的曝光和流量&#xff0c;成为众多开发者关注的焦点。 一、理解…

DC-8渗透测试复现

DC-8渗透测试复现 目的&#xff1a; 获取最高权限以及flag 过程&#xff1a; 信息打点--sql注入- 命令执行反弹shell-exim4提权 环境&#xff1a; 攻击机&#xff1a;kali(192.168.85.137) 靶机&#xff1a;DC_3(192.168.85.140) 复现&#xff1a; 一.信息收集 nmap -…

Golang:三种引号详解-单引号、双引号、反引号

Golang限定字符或者字符串一共三种引号&#xff1a; 单引号&#xff08;)&#xff0c;单个字符&#xff0c;更类似于C语言中的char类型&#xff0c; 双引号("") &#xff0c;字符串&#xff0c;单行的&#xff0c;多个字符&#xff08;字母数字&#xff09;。 反引…

在报表控件 FastReport .NET 中使用 PageCreate 事件

FastReport Business Graphics .NET&#xff0c;是一款基于fastreport报表开发控件的商业图形库&#xff0c;借助 FastReport 商业图形库&#xff0c;您可以可视化不同的分层数据&#xff0c;构建业务图表以进行进一步分析和决策。利用数据呈现领域专家针对 .NET 7、.NET Core、…