Ant Design中外部控制Table组件的sorter(后端真分页，排序)

问题描述

用户当前列表页跳转至其他页面，返回后丢失排序记录，或者想通过其他按钮控制列表的排序解决方案

定义自己的Pagination，继承TablePaginationConfig

export interface MyTablePagination extends TablePaginationConfig {
  totalPages?: number;
  sort?: SorterResult<any>;
}

分页数据来源于model控制的prop，

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,
      });
    }
  };

行属性配置

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);