design vue 實現(xiàn)表格開啟列排序

發(fā)布時間：2020-10-29 14:25:44 來源：億速云閱讀：568 作者：Leah 欄目：開發(fā)技術

design vue 實現(xiàn)表格開啟列排序？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

開啟排序

1、本地數(shù)據(jù)排序

column數(shù)據(jù)設置，需要開啟的列設置sorter: (a, b) => a.address.length - b.address.length, 自定義排序方法

2、服務端排序sorter設置true

點擊排序，表格觸發(fā)change方法，接受參數(shù)

change (pagination, filters, sorter, { currentDataSource })

第三個參數(shù)就是排序信息

{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 表格排序，默認點擊排序順序是[升序，降序，不排序] 如此循環(huán)

如何設置先降序后升序呢，api文檔有提到

design vue 實現(xiàn)表格開啟列排序

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

2、在表格直接設置sortDirections

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

3、用['descend' | 'ascend']寫法不行，用數(shù)組['descend', 'ascend']

4、設置defaultSortOrder沒有效果

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

design vue 實現(xiàn)表格開啟列排序

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細節(jié)

design vue 實現(xiàn)表格開啟列排序

猜你喜歡

最新資訊

相關推薦

相關標簽