class View extends React.Component<IViewProps, IViewStates> { componentDidMount() { const { dispatch, pagination } = this.props; // 此次Params定义你访问接口传递的参数声明 /*类似： export interface OpcParamsType { // 通用参数 currentPage?: number; pageSize?: number; id?: number; ids?: any; } */ const params: Partial<Params> = { currentPage: 1, pageSize: pagination.pageSize, }; if (pagination.sort !== '') { params.sort = pagination.sort; } if (dispatch) { dispatch({ //你的命名空间+方法名 type: 'your/fetchTab', payload: params, }); } } }
表格点击排序或分页的响应事件
/** * @name: 表格分页点击事件 * @msg: * @param {type} * @return: */ handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => { const { dispatch } = this.props; const params: Partial<Params> = { currentPage: pagination.current, pageSize: pagination.pageSize, }; if (sorter.order !== undefined) { params.sort = sorter; } if (dispatch) { dispatch({ type: 'your/fetchTab', payload: params, }); } };
行属性配置
const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', sorter: true, sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined, },]
表格组件
<div> <ProTable rowKey={(record) => record.name} columns={columns} loading={loading} dataSource={tab} search={false} options={false} tableAlertRender={false} pagination={{ ...pagination, showQuickJumper: true, showSizeChanger: true, showTotal: () => `${pagination.current}/${pagination.totalPages}`, }} onChange={this.handleStandardTableChange} /> </div>
完整代码
/* eslint-disable react/no-unused-state */ import React from 'react'; import ProTable, { ProColumns } from '@ant-design/pro-table'; import intl from 'react-intl-universal'; import { Button, Divider, message } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import { connect, ConnectProps } from 'umi'; import { ConnectState } from '@/models/connect'; import { MyTablePagination } from '@/pages/diagnosis/audit/data'; interface IViewProps extends Partial<ConnectProps> { tab: []; paginationAe: MyTablePagination; loading: boolean; } interface IViewStates {} class View extends React.Component<IViewProps, IViewStates> { componentDidMount() { const { dispatch, pagination } = this.props; // 此次Params定义你访问接口传递的参数声明 /*类似： export interface OpcParamsType { // 通用参数 currentPage?: number; pageSize?: number; id?: number; ids?: any; } */ const params: Partial<Params> = { currentPage: 1, pageSize: pagination.pageSize, }; if (pagination.sort !== '') { params.sort = pagination.sort; } if (dispatch) { dispatch({ //你的命名空间+方法名 type: 'your/fetchTab', payload: params, }); } } /** * @name: 表格分页点击事件 * @msg: * @param {type} * @return: */ handleStandardTableChange = (pagination: Partial<MyTablePagination>, _: any, sorter: any) => { const { dispatch } = this.props; const params: Partial<Params> = { currentPage: pagination.current, pageSize: pagination.pageSize, }; if (sorter.order !== undefined) { params.sort = sorter; } if (dispatch) { dispatch({ type: 'your/fetchTab', payload: params, }); } }; render() { const { tab, pagination, loading } = this.props; const { sort } = pagination; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', sorter: true, sortOrder: sort && sort !== '' && sort.columnKey === 'name' ? sort.order : undefined, },]; return ( <div> <ProTable rowKey={(record) => record.name} columns={columns} loading={loading} dataSource={tab} search={false} options={false} tableAlertRender={false} pagination={{ ...pagination, showQuickJumper: true, showSizeChanger: true, showTotal: () => `${pagination.current}/${pagination.totalPages}`, }} onChange={this.handleStandardTableChange} /> </div> ); } } export default connect(({ your, loading }: ConnectState) => ({ tab: your.tab, loading: loading.effects['your/fetchTab'], pagination: your.pagination, }))(View);
以上这篇ant design pro中可控的筛选和排序实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: