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 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 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>
);
};