今天就跟大家聊聊有關(guān)如何使用Ant Design的Table組件取消排序，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
在Ant Design的Table組件文檔中，排序有三種狀態(tài)：點(diǎn)擊升序、點(diǎn)擊降序、取消排序。一般需求只需要升序和降序，不需要取消排序，這時(shí)候就需要我們?cè)O(shè)置sortOrder來(lái)去除取消排序。
首先，我們從官方文檔中ctrl+c出一個(gè)排序栗子，放在我們的組件中。
官方栗子
重慶分公司
重慶分公司
import React, { useEffect, useState } from 'react';
import { Table } from 'antd'
export default () => {
const [data, setData] = useState([
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 30,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 25,
address: 'London No. 2 Lake Park',
},
]
)
const columns: any = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a: any, b: any) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
]
const onChange = (pagination: any, filters: any, sorter: any, extra: any) => {
//pagination分頁(yè)、filters篩選、sorter排序變化時(shí)觸發(fā)。extra:當(dāng)前的data
console.log(sorter)
}
return (
);
} 
