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

本文主要是介绍封装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 }}/>