Vue Antd table組件實(shí)現(xiàn)服務(wù)端排序方式
Vue Antd table組件實(shí)現(xiàn)服務(wù)端排序
由于業(yè)務(wù)的需求，分頁由后端完成，所以排序也必須使用后端排序，但是使用Table默認(rèn)的sort自定義函數(shù)只能夠進(jìn)行當(dāng)前頁面的排序
（舉個(gè)例子：如果有100條數(shù)據(jù)，每頁有10條數(shù)據(jù)，點(diǎn)擊排序只會(huì)進(jìn)行當(dāng)前頁面的排序，剩下的9個(gè)分頁還是雜亂無章的）
const colums = [
{
title: '點(diǎn)贊數(shù)',
dataIndex: 'diggCount',
sorter: (a, b) => a.diggCount - b.diggCount,
sortDirections: ['descend', 'ascend'],
},
]
想要進(jìn)行服務(wù)端的排序需要進(jìn)行以下步驟，
1. 根據(jù)antd 官方文檔，設(shè)置sorter：true
{
title: '點(diǎn)贊數(shù)',
dataIndex: 'diggCount',
sorter: true,
sortDirections: ['descend', 'ascend'],
},2. 根據(jù)文檔的change事件得出
- change的第一個(gè)參數(shù)為分頁發(fā)生改變時(shí)的回調(diào)
- 第二個(gè)參數(shù)為過濾發(fā)生的回調(diào)
- 第三個(gè)為排序發(fā)生變化時(shí)的回調(diào)（這里我們主要用到第三個(gè)參數(shù)）
給table組件加上change事件
<a-table
:columns="columns"
:data-source="videoList"
:scroll="{ y: 100000 }"
:pagination="pagination"
@change="changeTab"
>
changeTab (p, f, s) {
console.log(p, f, s)
},通過打印可以看出console.log(p,f,s)中s的打印結(jié)果如下
field為需要排序的字段，order為排序的升降序。
（Antd點(diǎn)擊排序的默認(rèn)順序?yàn)椋航敌?，升序，不排序，以此循環(huán)，所以三次的order屬性打印值為"descend"，"ascend"和""）三種情況，所以要進(jìn)行空值判斷，
最終的change函數(shù)如下，就可以實(shí)現(xiàn)整個(gè)數(shù)據(jù)的排序功能了。
changeTab (p, f, { field, order }) {
this.pagination.current = p.current
this.sort = {
orderField: field || '',
order: order || ''
}
this.getData()
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Vue使用Antd中a-table實(shí)現(xiàn)表格數(shù)據(jù)列合并展示示例代碼
- antd?vue?table表格內(nèi)容如何格式化
- antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能
- Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
- antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
- Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法(基于 vue + AntDesign)
相關(guān)文章
這篇文章主要介紹了vue如何直接獲取url中的參數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
ElementUI之表格toggleRowSelection選中踩坑記錄
這篇文章主要介紹了ElementUI之表格toggleRowSelection選中踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
在?Vue3?中，有許多與響應(yīng)式相關(guān)的函數(shù)，例如?toRef、toRefs、isRef、unref?等等,本文將詳細(xì)介紹這些函數(shù)的用法，讓我們?cè)趯?shí)際開發(fā)中知道應(yīng)該使用哪些?API?并能夠熟練地回答面試官的相關(guān)問題2023-08-08
關(guān)于vue-router路由的傳參方式params query
這篇文章主要介紹了關(guān)于vue-router路由的傳參方式params query,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別
這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
vue emit之Property or method “$$v“ i
這篇文章主要介紹了vue emit之Property or method “$$v“ is not defined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js簡(jiǎn)易安裝和快速入門的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04