从品牌网站建设到网络营销策划,从策略到执行的一站式服务
今天就跟大家聊聊有关如何使用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 (); }
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图