快捷導(dǎo)航

Vue Antd table組件實(shí)現(xiàn)服務(wù)端排序方式

更新時(shí)間：2025年03月31日 10:41:54 作者：你看人家超

這篇文章主要介紹了Vue Antd table組件實(shí)現(xiàn)服務(wù)端排序方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js仿Select下拉框效果
這篇文章主要為大家詳細(xì)介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
vue-router的兩種模式的區(qū)別
這篇文章主要介紹了vue-router的兩種模式的區(qū)別，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
vue 自定義組件實(shí)現(xiàn)通訊錄功能
本文通過實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下
2018-09-09
vue form表單post請(qǐng)求結(jié)合Servlet實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了vue form表單post請(qǐng)求結(jié)合Servlet實(shí)現(xiàn)文件上傳功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2021-01-01
用vue快速開發(fā)app的腳手架工具
這篇文章主要介紹了用vue快速開發(fā)app的腳手架工具，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
vue實(shí)現(xiàn)大文件切片上傳的示例詳解
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧
2023-11-11
vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題
這篇文章主要介紹了vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中引入bootstrap.min.css的正確姿勢(shì)分享
這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢(shì),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
使用v-on:click給button綁定監(jiān)聽事件以及回調(diào)函數(shù)，@是v-on:的縮寫，也就是簡寫也可以使用@click，這篇文章主要介紹了Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符,需要的朋友可以參考下
2022-08-08
vue打包項(xiàng)目版本號(hào)自加的操作步驟
項(xiàng)目每次打包后都需要改動(dòng)項(xiàng)目版本號(hào)，這個(gè)改動(dòng)每次都需要在package.json中修改version，比較麻煩，到底有沒有一種打包后版本號(hào)自加的辦法，這篇文章主要介紹了vue打包項(xiàng)目版本號(hào)自加的步驟,需要的朋友可以參考下
2022-09-09