青岛建设监理协会网站,wordpress wordpress,免费 网站 空间,网站后台管理模块一般情况下#xff0c;我们在页面组件里面都会使用state创建对应的分页参数和分页方法然后传入对应的组件内部#xff0c;再或者选择行、全选等等#xff0c;这都会在每一个组件中徒增大量的代码行数#xff0c;所以简单整理了一下这个只是针对于处理逻辑的组件#xff1a…一般情况下我们在页面组件里面都会使用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 rowKeyconst [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组件无非就这些参数。
