建站
咨询
售后
建站咨询
如何使用AntDesign的Table组件取消排序-创新互联
今天就跟大家聊聊有关如何使用Ant Design的Table组件取消排序，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
在Ant Design的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。
首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。
官方栗子
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 (
);
} 当前名称：如何使用AntDesign的Table组件取消排序-创新互联
标题路径：http://www.scyingshan.cn/article/gpsii.html
