ant design vue 表格如何开启列排序

本文介绍了在Ant Design Vue中开启表格列排序的方法,包括本地数据和服务器数据的排序方式,并详细阐述了如何设置默认点击列排序为降序,提供了相关API的使用技巧和注意事项。

开启排序

1、本地数据排序

column数据设置,需要开启的列设置sorter: (a, b) => a.address.length - b.address.length, 自定义排序方法

2、服务端排序sorter设置true

点击排序,表格触发change方法,接受参数

change (pagination, filters, sorter, { currentDataSource }) 第三个参数就是排序信息{field, order}

<a-table
      :columns="header"
      :dataSource="body"
      :pagination="pagination"
      @change="handleTableChange"
    >

methods: {
    handleTableChange (pagination, filters, {field, order}) {
      this.sort = {
        field: field || '',
        order: order || ''
      }
      
      this.pagination.current = pagination.current
      this.getList()
    },
}

如何设置第一次点击是降序

ant design vue 表格排序,默认点击排序顺序是[升序,降序,不排序] 如此循环

如何设置先降序后升序呢,api文档有提到

1、可以在column的每一项设置sortDirections: ['descend', 'ascend']

2、在表格直接设置sortDirections

<a-table
      :columns="header"
      :dataSource="body"
      :pagination="pagination"
      @change="handleTableChange"
      :sortDirections="['descend', 'ascend']" // 这里
    >

3、用['descend' | 'ascend']写法不行,用数组['descend', 'ascend']

4、设置defaultSortOrder没有效果

评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值