溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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實現的表格排序點擊第三次取消排序的解決方法
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
