在Ant Design的Table组件文档中,排序有三种状态:点击升序、点击降序、取消排序。一般需求只需要升序和降序,不需要取消排序,这时候就需要我们设置sortOrder来去除取消排序。
首先,我们从官方文档中ctrl+c出一个排序栗子,放在我们的组件中。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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分页、filters筛选、sorter排序变化时触发。extra:当前的data console.log(sorter) } return ( <div> <Table columns={columns} dataSource={data} onChange={onChange} /> </div> ); }
当我们点击排序时,会触发onChange事件,打印出的sorter如下:
其中,sorter.order为排序状态。undefined:取消排序,ascend:升序,descend:降序。
如何去除取消排序呢?在官方提供的API中,有sortOrder和sortDirections这两个参数,
sortOrder:排序的受控属性,外界可用此控制列的排序,可设置为ascend、
descend、
false。
sortDirections:支持的排序方式,覆盖
Table
中sortDirections
, 取值为 ascend
、descend。
下面我们就来开始实现去除取消排序。
一、设置sortOrder
首先我们需要声明一个变量sortOrderTest,默认为descend
const [sortOrderTest, setSortOrderTest] = useState<string>('descend')
然后给colum中的排序项Age设置sortOrder
{
title: 'Age',
dataIndex: 'age',
sortOrder: sortOrderTest,
sorter: (a: any, b: any) => a.age - b.age,
},
设置完成之后,每次点击排序,发现console输出的一直都是undefined,这是因为我们默认为descend,下一个状态为取消排序,而我们没有去更改sorter状态导致的。所以每次当我们onChange的时候,都要去改变一下设置的变量sortOrderTest
只改变sortOrderTest依然是不够的,这时再进行我们的第二步设置。
二、设置sortDirections
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sortOrder: sortOrderTest,
sortDirections: ['descend', 'ascend'],
sorter: (a: any, b: any) => a.age - b.age,
}
这样设置完成之后,Table就去除了取消排序,只剩下升序和降序了。
三、优化
去除取消排序后,表头显示下一次排序的 tooltip 提示一直是点击升序、取消排序循环展示。取消排序其实就是降序,但是不够直观,目前菜菜的我尚未找到如何设置,暂时将tootip关闭。如果你有方法,也可以在评论中告诉我^_^ ,后续我找到方法也会更新哦。要将tootip关闭,showSorterTooltip设置为false即可,具体设置如下:
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sortOrder: sortOrderTest,
sortDirections: ['descend', 'ascend'],
showSorterTooltip:false,
sorter: (a: any, b: any) => a.age - b.age,
}
项目中的排序一般是通过接口来排序的,要根据sorter来传不同的参数获取结果,这时候就可以用useEffect来处理。
首先,我们需要将更改column中的sorter,将其置为true。
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sortOrder: sortOrderTest,
sortDirections: ['descend', 'ascend'],
showSorterTooltip: false,
sorter: true,
}
然后我们写一个请求函数
const getList = () => {
let data = {
sort: sortOrderTest
}
console.log(data)
//根据参数去发送请求
//await。。。。
//请求成功之后设置data,达成排序
//setData(result)
}
最后,将这个函数放到useEffect中,每当sorter改变的时候,就会自动触发该函数。
useEffect(() => {
getList()
}, [sortOrderTest])
四、完整代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import React, { useEffect, useState } from 'react'; import { Table } from 'antd' export default () => { const [sortOrderTest, setSortOrderTest] = useState<string>('descend'); 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', }, ] ) useEffect(() => { getList() }, [sortOrderTest]) const getList = () => { let data = { sort: sortOrderTest } console.log(data) //根据参数去发送请求 //await。。。。 //请求成功之后设置data,达成排序 //setData(result) } const onChange = (pagination: any, filters: any, sorter: any, extra: any) => { setSortOrderTest(sorter.order || 'descend') } const columns: any = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', sortOrder: sortOrderTest, sortDirections: ['descend', 'ascend'], showSorterTooltip: false, sorter: true, }, { title: 'Address', dataIndex: 'address', key: 'address', }, ] return ( <div> <Table columns={columns} dataSource={data} onChange={onChange} /> </div> ); }