antd table 筛选排序远程加载 触发pagination onChange事件

背景:  在使用antd的Table组件的时候，本来只有正常的翻页需求，然后加了一个表头的筛选功能。
很简单，然后踩坑了。。

遇到问题如下：按照官网demo添加事件，但是发现写完之后，请求了两次接口，一次带筛选一次不带筛选

如图 ：

本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 onFilter 和 sorter 函数，而是在把筛选和排序的参数发到服务端来处理。

遇到问题如下：按照官网demo添加事件，但是发现写完之后，请求了两次接口，一次带筛选一次不带筛选

没有思路，看到某博主的帖子，发现这是antd一个bug设计
#Table 组件排序功能会自动触发 pagination 的 onChange 事件#

再看官网，顿悟，onchange 事件，返回参数如下：

function(
 pagination, 
 filters, 
 sorter, 
 extra: { currentDataSource: [], action: paginate | sort | filter }

)

action可以判断是分页/筛选/排序触发类型
所以，筛选时触发分页事件，调用2次接口，解决方案如下：

pagination中onchange事件不使用，直接使用table的onChange回调同时监听判断是筛选/分页两个事件，并获取到参数，远程查询。

具体实现代码如下：

//table标签

    <Table
        columns={columns}
        rowKey={record => record.login.uuid}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={this.handleTableChange}
      />

 const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    render: name => `${name.first} ${name.last}`,
    width: '20%',
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [
      { text: 'Male', value: 'male' },
      { text: 'Female', value: 'female' },
    ],
    width: '20%',
  },
  {
    title: 'Email',
    dataIndex: 'email',
  },
];

handleTableChange = (pagination, filters, sorter) => {
   //接口查询
    this.fetch({
      sortField: sorter.field,
      sortOrder: sorter.order,
      pagination,
      ...filters,
    });
  };