design vue 表格開啟列排序的操作

開啟排序

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沒有效果

補充知識：Ant Design Vue實現的表格排序點擊第三次取消排序的解決方法

以上這篇design vue 表格開啟列排序的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。