Antd Pro ProTable 表格按指定列排序

更新日期: 2023-01-03 阅读次数: 356 字数: 187 分类: ReactJS

例如,Antd Pro 列表中,我想按照创建时间这列正序或倒序重新排列。

字段配置

{
  title: '创建时间',
  dataIndex: 'CreatedAt',
  valueType: 'dateTime',
  search: false,
  sorter: true,
},

request 请求

export async function getItems(
  params: {
    current?: number;
    pageSize?: number;
  },
  sort: any,
  options?: { [key: string]: any },
) {
  for (const [key, value] of Object.entries(sort)) {
    params[key + 'Sort'] = value;
  }
  return request<API.Items>('/api/getItems', {
    method: 'GET',
    params: {
      ...params,
    },
    ...(options || {}),
  });
}

sort 的数据结构

{CreatedAt: 'ascend'}
{CreatedAt: 'descend'}

测试了一下,如果是多列可以排序,每次只会有一个生效。 不存在两个字段同时参与排序的情况。

请求格式

http://localhost:8000/api/getItems?current=1&pageSize=20&CreatedAtSort=ascend

后台 API

后台判断是否存在 CreatedAtSort 查询参数即可。

tags: Ant Design Pro

爱评论不评论