如何在Ant Design Table中实现基于API的字段排序功能？

你需要把Table组件返回的排序参数传递给后端接口，核心是在fetchData里使用tableParams中的排序信息，而非固定值。以下是修改后的完整代码和关键改动说明：

关键改动点 #

• 在fetchData中提取tableParams里的排序字段与方向，替换原有固定的OrderField和OrderDir
• 处理排序参数的默认值，避免初始状态无排序参数导致的异常
• 确保handleTableChange正确保存排序状态到tableParams（你的现有代码这部分已完成，仅需微调）

修改后的完整代码 #

const fetchData = async () => {
  setloading(true);
  const { current, pageSize } = tableParams.pagination;
  // 从tableParams获取排序信息，无值时用默认配置
  const { field: OrderField = 'Id', order: OrderDir = 'ascend' } = tableParams;
  const postModel = {
    PageIndex: current,
    PageSize: pageSize,
    Filter: '',
    // 将AntD的排序方向转为后端要求的ASC/DESC格式
    OrderDir: OrderDir.toUpperCase(),
    // 仅允许指定字段排序，默认回退到Id
    OrderField: OrderField === 'createUserName' ? 'createUserName' : 'Id',
  };
  const response = await ticketService.getList(postModel);
  setData(response.datas);
  setloading(false);
  setTableParams({
    ...tableParams,
    pagination: {
      ...tableParams.pagination,
      total: response.totalItemsCount,
    }
  })
};

const handleTableChange = (pagination, filters, sorter) => {
  setTableParams({
    pagination,
    filters,
    // 明确保存排序字段和方向
    field: sorter.field,
    order: sorter.order,
  });
  if (pagination.pageSize !== tableParams.pagination?.pageSize) {
    setData([]);
  }
};

useEffect(() => {
  fetchData();
  document.title = 'Ticket List';
}, [JSON.stringify(tableParams)]);

const myColumns = [
  {
    title: <SyncOutlined />,
    render: (record) => (
      <>
        <Space.Compact>
          <Button shape="circle" icon={<SearchOutlined />} href={`/ticket/action/list/${record.id}`}/>
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}/>
        </Space.Compact>
      </>
    ),
    width: '10%',
    responsive: ['md'],
  },
  {
    title: 'User Name',
    dataIndex: 'createUserName',
    key:'createUserName',
    sorter:true,
    render: (createUserName) => `${createUserName}`,
    responsive: ['md'],
    width: '30%',
  },
];

逻辑说明 #

1. 排序状态捕获：用户点击用户名列的排序按钮时，handleTableChange会将sorter.field（即createUserName）和sorter.order（ascend/descend）存入tableParams
2. 接口参数适配：fetchData中将排序方向转为大写的ASC/DESC，同时限制排序字段仅为createUserName或默认的Id，避免传递非法字段给后端
3. 自动触发请求：由于useEffect依赖JSON.stringify(tableParams)，排序参数变化时会自动调用fetchData重新请求后端，更新表格数据

内容的提问来源于stack exchange，提问作者Goktug