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