快捷導(dǎo)航

el-table表格排序(多列排序和遠(yuǎn)程排序)

更新時(shí)間：2023年05月30日 11:02:55 作者：小星星__

本文主要介紹了el-table表格排序(多列排序和遠(yuǎn)程排序)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們在做表格的時(shí)候經(jīng)常會遇到表頭有一個(gè)排序的icon 用來對數(shù)據(jù)進(jìn)行, el-table有自己的排序方法, 如下:

在列中設(shè)置sortable屬性即可實(shí)現(xiàn)以該列為基準(zhǔn)的排序，接受一個(gè)Boolean，默認(rèn)為false。

一、el-table支持調(diào)接口排序嗎?

el-table默認(rèn)的排序支持從接口獲取排序的數(shù)據(jù)

sortable: 對應(yīng)列是否可以排序，如果設(shè)置為 custom，則代表用戶希望遠(yuǎn)程排序，需要監(jiān)聽 Table 的 sort-change 事件

二、el-table支持多列排序嗎?

默認(rèn)的排序很簡單, 加一個(gè)參數(shù)就可以了, 而且會自動根據(jù)數(shù)據(jù)進(jìn)行排序, 但是我們會發(fā)現(xiàn), 默認(rèn)的排序只支持一列進(jìn)行排序, 當(dāng)我們排過一列之后在點(diǎn)擊另一列的排序圖標(biāo), 之前的排序就會消失??.

三、如何實(shí)現(xiàn)多列遠(yuǎn)程排序?

自己寫一個(gè)組件插入到表頭的位置實(shí)現(xiàn)排序
根據(jù)el-table已有的屬性以及拋出的方法實(shí)現(xiàn)多列排序

如果手動封裝一個(gè)組件肯定能實(shí)現(xiàn), 但是比較麻煩, 所以就研究了el-table相關(guān)了一些屬性和方法, 思路如下:

header-cell-class-name: 表頭單元格的 className 的回調(diào)方法，也可以使用字符串為所有表頭單元格設(shè)置一個(gè)固定的className

在點(diǎn)擊表頭的時(shí)候排序的列以及是升降序保存到一個(gè)數(shù)組對象ordersList里, 然后通過header-cell-class-name屬性設(shè)置選中的樣式.

四、核心代碼

data: {
	    return {
	       ordersList: [],
	    }
	}
	// 點(diǎn)擊表頭
	handleHeaderCLick(column){
      if (column.sortable !== 'custom') {
          return
      }
      if (!column.multiOrder) {
          column.multiOrder = 'descending'
      } else if (column.multiOrder === 'descending') {
          column.multiOrder = 'ascending'
      } else {
          column.multiOrder = ''
      }
      this.handleOrderChange(column.property, column.multiOrder)
    },
    handleOrderChange (orderColumn, orderState) {
      let result = this.ordersList.find(e => e.orderColumn === orderColumn)
      if (result) {
          result.orderState = orderState
      } else {
          this.ordersList.push({
              orderColumn: orderColumn,
              orderState: orderState,
          })
      }
      // 調(diào)接口查詢，在傳參的時(shí)候把ordersList進(jìn)行處理成后端想要的格式(這里是把數(shù)據(jù)拋出, 外部調(diào)用組件的地方處理)
      this.sendInfo(this.ordersList, 'sort-change')
    },
    // 上面缺點(diǎn)是只能通過點(diǎn)擊表頭切換排序狀態(tài)，點(diǎn)擊小三角排序不會觸發(fā)，處理sort-change事件和點(diǎn)擊表頭一樣
    sortChange({column}) {
      // 有些列不需要排序，提前返回
      if (column.sortable !== 'custom') {
          return
      }
      if (!column.multiOrder) {
          column.multiOrder = 'descending'
      } else if (column.multiOrder === 'descending') {
          column.multiOrder = 'ascending'
      } else {
          column.multiOrder = ''
      }
      this.handleOrderChange(column.property, column.multiOrder)
    },
    // 設(shè)置列的排序?yàn)槲覀冏远x的排序
    handleHeaderClass({ column }) {
      column.order = column.multiOrder
    }

這樣外部拿到的就是一個(gè)所有排序的數(shù)組, 包括prop以及當(dāng)前列的排序規(guī)則(ascending/descending/null), 將其處理成正確的入?yún)⒏袷郊纯?