開啟排序

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,{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 表格開啟列排序的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。