antd Table实现多级排序。

Ant Design（antd）是一个企业级的UI设计语言和React实现，它提供了一套完整的组件库供开发者使用。其中，antd的Table组件支持基本的表格操作，包括多级排序功能。多级排序指的是用户可以通过点击表头的列来进行多维度的数据排序，每次点击都会按照该列进行升序或降序排序，并在列上显示当前的排序状态。

为了实现多级排序，我们通常需要定义一个排序状态管理机制，例如使用一个数组来记录当前的排序列和排序顺序。在Table组件中，可以通过配置sorter属性来实现这一功能。以下是一个简单的实现多级排序的示例：

import React, { useState } from 'react';
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  // 更多列...
];

const MyTable = () => {
  const [sortedInfo, setSortedInfo] = useState({});

  const handleTableChange = (pagination, filters, sorter) => {
    setSortedInfo(sorter);
  };

  const sortedColumns = columns.map(col => {
    if (col.sorter) {
      return {
        ...col,
        sortOrder: sortedInfo.columnKey === col.dataIndex && sortedInfo.order,
      };
    }
    return col;
  });

  return (
    <Table
      columns={sortedColumns}
      dataSource={data}
      onChange={handleTableChange}
      // 其他配置...
    />
  );
};

在上述代码中，`handleTableChange` 函数会在表格排序发生变化时被调用，它会更新排序状态`sortedInfo`。`sortedColumns` 根据`sortedInfo`来设置每列的`sortOrder`，这样就可以在列上显示当前的排序状态。