封装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 = {
        // 当前选中行list
        selectedRowKeys,
        // 禁用选中
        getCheckboxProps: record => ({
            disabled: record.disabled,
        }),
        // onChange: (keys, selectedRows, info) => {
        //     console.log(keys, selectedRows, info)
        // },
        // 单选按钮
        onSelect: (record, selected) => {
            let selectedData = selectedList
            // 选中 push
            if (selected) {
                selectedData.push(record)
            } else {
                // 未选中 splice
                selectedData.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 = selectedList
            if (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 list
        selectedRowKeys,
        // 当前选中的 对象 list
        selectedList,
        // 设置当前选中的 rowKey list
        setSelectedRowKeys,
        // 设置当前选中的 对象 list
        setSelectedList,
        // 初始化选中框
        initSelect,
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

使用的时候我们我们只需要传入当前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)
    }
1
2
3
4
5
6
7
8
9
10
11
12

const {
        pageNum,
        pageSize,
        changeCurrentAndPageSize,
        // rowSelection,
        // selectedRowKeys,
        // initSelect,
        paginationChange,
    } = useRowSelection({
        rowKey: 'id',
        getTable,
    })
1
2
3
4
5
6
7
8
9
10
11
12

	form表单收集查询参数即可
    const search = async () => {
        changeCurrentAndPageSize(1, 10, {
            ...form.getFieldsValue(),
        })
    }
1
2
3
4
5
6

    const reset = () => {
        form.resetFields()
        changeCurrentAndPageSize(1, 10, {
            ...form.getFieldsValue(),
        })
    }
1
2
3
4
5
6

<myTable
     Props={{
          title: '列表',
          columns: [],
          dataSource: [],
          showPagination: true,
          rowKey: 'id',
      }}
      pageProps={{ total, pageNum, onChange: paginationChange, pageSize }}
  />
1
2
3
4
5
6
7
8
9
10

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