design vue 表格開啟列排序的操作
更新時間：2020年10月28日 15:48:19 作者：Cookysurongbin
這篇文章主要介紹了design vue 表格開啟列排序的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
開啟排序
1、本地數(shù)據(jù)排序
column數(shù)據(jù)設(shè)置，需要開啟的列設(shè)置sorter: (a, b) => a.address.length - b.address.length, 自定義排序方法
2、服務(wù)端排序sorter設(shè)置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()
},
}
如何設(shè)置第一次點擊是降序
ant design vue 表格排序，默認點擊排序順序是[升序，降序，不排序] 如此循環(huán)
如何設(shè)置先降序后升序呢，api文檔有提到
1、可以在column的每一項設(shè)置sortDirections: ['descend', 'ascend']
2、在表格直接設(shè)置sortDirections
<a-table :columns="header" :dataSource="body" :pagination="pagination" @change="handleTableChange" :sortDirections="['descend', 'ascend']" // 這里 >
3、用['descend' | 'ascend']寫法不行，用數(shù)組['descend', 'ascend']
4、設(shè)置defaultSortOrder沒有效果
補充知識：Ant Design Vue實現(xiàn)的表格排序點擊第三次取消排序的解決方法
以上這篇design vue 表格開啟列排序的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue打包使用Nginx代理解決跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
最近在做一個基于vue的后臺管理項目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下2019-05-05
Vue.js中,computed屬性根據(jù)依賴進行緩存,只有依賴改變時才重新計算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動更新,并且默認是只讀的,它與methods的主要區(qū)別在于計算屬性具有緩存性,而方法每次調(diào)用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應(yīng)用性能2024-09-09
這篇文章主要介紹了Vue3中如何通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
對請求的封裝在實際項目中是十分必要的,它可以讓我們統(tǒng)一處理 http 請求,比如做一些攔截,處理一些錯誤等,本篇文章將詳細介紹如何封裝 axios 請求,需要的朋友可以參考下2023-09-09
相信開發(fā)中或多或少都會有使用md的時候。那么一個簡易的md編輯器顯得尤為重要，如果想要在自己的項目中添加一個md編輯器，那么不妨來看看這篇文章2021-10-10
這篇文章主要給大家介紹了關(guān)于vue將某個組件打包成js并在其他項目使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
我們有時候會碰到這種情況，需要連續(xù)發(fā)送兩個請求，第二個請求需要用第一個請求的某個返回值作為參數(shù)來作為第二個請求的請求參數(shù)，這篇文章主要介紹了vue請求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
VUE2響應(yīng)式原理使用Object.defineProperty缺點
這篇文章主要為大家介紹了VUE2響應(yīng)式原理使用Object.defineProperty缺點示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08