antd的Table组件多列排序时删除取消排序

antd的Table组件多列排序时删除取消排序

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

export default () => {
  // 默认进入或刷新页面为不排序 
  const [sortType, setSortType] = useState<string>(''); // 排序类型 默认无
  const [currentSort, setCurrentSort] = useState<string>(''); // 当前排序列 默认无
  // 默认进入或刷新页面为某列排序请设置默认值 
  // const [sortType, setSortType] = useState<string>('descend'); // 排序类型 默认降序
  // const [currentSort, setCurrentSort] = useState<string>('name'); // 当前排序列 默认name姓名列

  // 表格数据
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '3',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
    {
      key: '4',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];

  useEffect(() => {
    loadData();
  }, [sortType, currentSort]);

  async function loadData() {
    let sort = {};
    if (currentSort) {
      sort = {
        name: currentSort,
        type: sortType,
      };
    }
    // 获取到当前排序列的名称和类型
    console.log(sort);
    // 根据自己需求改为请求接口 根据接口传递参数
    // const { dataSet, total } = await search({ pageIndex: 1, pageSize: 20, ...sort });
    // return { data: dataSet, total: total };
  }

  const columns: any = () => {
    let extra = {
      sortOrder: sortType,
      sortDirections: ['descend', 'ascend'],
      showSorterTooltip: false,
    };

    return [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        sorter: true,
        ...(currentSort === 'name' ? extra : null),
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        sorter: true,
        ...(currentSort === 'age' ? extra : null),
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        sorter: true,
        ...(currentSort === 'address' ? extra : null),
      },
    ];
  };
  return (
    <div>
      <Table
        columns={columns()}
        dataSource={dataSource}
        onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
          if (currentSort && currentSort !== sorter.columnKey) {
          	// 切换排序列重置为升序
            setCurrentSort(sorter.columnKey);
            setSortType('ascend');
          } else {
            setCurrentSort(sorter.columnKey);
            setSortType(sorter.order || 'descend');
          }
        }}
      />
    </div>
  );
};