【解决】antd table 排序无效

问题

点击排序图标，会重新请求api，但是排序图标方向没有变化，列表开始时间始终升序排列，handleTableChange拿到的参数一直是升序。

解决

因为最初设定的columns只是一个单一的数组包对象的结构，而没有考虑还存在children的情况。在对columns进行处理的时候，并没有遍历到children部分数据，导致sortOrder和sorter参数设置不正确，与所点击排序的那一列数据没有对应上。

export interface IColumnType extends ColumnType<any> {
  minWidthWhenCellExpand?: number | string;
  editable?: boolean;
  children?: IColumnType[];
}

const columns=[
 {
  title: 'Channel Details',
  key: 'channel_detail',
  children: [
    {
      title: 'Channel Agreement Item',
      dataIndex: 'channel_detail',
      key: 'channel_agreement_item',
      render: (data: any) => data.agreement_item,
    },
    {
      title: 'Channel Clearing Date',
      dataIndex: 'channel_detail',
      key: 'channel_clearing_date',
      width: 100,
      sorter: true,
      render: (data: any) => {
        return transformDate(data.clearing_date, dateFormat);
      },
    },
    {
      title: 'Channel Trans Time',
      dataIndex: 'channel_detail',
      key: 'channel_transaction_time',
      width: 100,
      sorter: true,
      render: (data: any) => {
        return transformDate(data.transaction_time, dateTimeFormat);
      },
    },
    {
      title: 'Fund Direction',
      dataIndex: 'channel_detail',
      key: 'channel_fund_direction',
      render: (data: any) => {
        return getFundDirection(data.fund_direction);
      },
    },
  ]
 }
]

// 修改后的columns处理函数（关键处理部分）
const handledColumns = (oldColumns: IColumnType[]) => {
  if (oldColumns?.length === 0) {
    return [];
  }
  const newColumns: IColumnType[] = [];
  oldColumns?.forEach((per: IColumnType) => {
    let order: 'descend' | 'ascend' | null;
    if (getTableSorter().sort_by === per.key && getTableSorter().sort_order) {
      order = getTableSorter().sort_order === '0' ? 'ascend' : 'descend';
    } else {
      order = null;
    }
    newColumns.push({
      onCell: () => {
        const minwidth = per.minWidthWhenCellExpand ? per.minWidthWhenCellExpand : COLUMN_MIN_WIDTH;
        return {
          style: {
            minWidth: cellExpand ? minwidth : undefined,
          },
        };
      },
      // 受控排序
      sortOrder: order,
      ...columnsOptions,
      ...per,
      title: getTableTitle(per.title as string),
      children: handledColumns(per.children || []),
    });
  });
  return newColumns;
};

const handleTableChange = (paginationObj: Pagination, filters?: any, sorter?: any, extra?: any) => {
  // 全列排序
  if (extra && extra.action === 'sort') {
    // console.log('need sort', sorter); // 始终显示为 ascend
    let order;
    if (sorter.order) {
      order = sorter.order === 'ascend' ? '0' : '1';
    } else {
      order = sorter.order;
    }
    setTableSorter({
      sort_by: sorter.columnKey,
      sort_order: order,
    });
    // Does page need change?
  }

  setPagination({
    ...getTablePagination(),
    ...paginationObj,
  });

  run();
};
  
<Table
  loading={loading}
  columns={handledColumns(columns)}
  dataSource={tableData}
  onChange={handleTableChange}
/>