ant design 中Table、EditableProTable过滤filter、排序sorter实现

1、Table的过滤、排序

实现主要是使用Table的onChange函数去捕捉filter、sorter的变化，这个看API即可实现

2、EditableProTable的过滤、排序不如Table那么直接

• [过滤]

使用QueryFilter实现

import {
  EditableProTable,
  QueryFilter,
  ProFormText,
  ProFormSelect,
} from '@ant-design/pro-components';

<QueryFilter
          defaultCollapsed={false}
          onFinish={async (values) => {
            console.log('values', values);
            setFilterMap(values);
          }}
        >
          <ProFormText name="city_name_pms" label="地市" />
          <ProFormSelect
            name="attr_access"
            label="场景"
            showSearch
            valueEnum={{
              城区: '城区',
              乡镇及其他: '乡镇及其他',
            }}
          />
          <ProFormSelect
            name="node_target"
            label="节点类型"
            showSearch
            valueEnum={{
              综合业务接入点: '综合业务接入点',
              BBU集中点: 'BBU集中点',
            }}
          />
        </QueryFilter>

• [排序]

怎么获取sorter变化的变量呢

EditableProTable提供了监听函数

   request={async (
            //触发排序事件
            // 第一个参数 params 查询表单和 params 参数的结合
            // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
            params: T & {
              pageSize: number;
              current: number;
            },
            sort,
            filter,
          ) => {
            console.log('sort', sort);
            const target = Object.values(sort);
            if (target && target.length && target[0]) {
              const result = {
                columnsKey: Object.keys(sort)[0],
                orderBy: target[0] === 'ascend' ? 'asc' : 'desc',
              };
              setSorterMap(result);
            } else {
              setSorterMap({});
            }
          }}

希望对你有帮助！