Element-ui前端自定義排序

1.在需要自定義排序的列上(el-table-column)加上sortable="cistom"

   2.在el-table上增加sort-change事件，監聽列的排序

 

 

 

//定義需要排序的列，這樣可以省去多個if-else if
const actions = new Map([
  ['votes', 'votes'],
  ['calcWeight', 'calcWeight'],
  ['addTransferFee', 'addTransferFee'],
  ['kiloCostBalance', 'kiloCostBalance'],
  ['dispatcherCalcWeight', 'dispatcherCalcWeight'],
  ['pafeiClosureFee', 'pafeiClosureFee'],
  ['kiloPafeiCostBalance', 'kiloPafeiCostBalance']
])

　　

使用一個proptype來存放需要排序的列

 // 自定義排序
    sortChange(column) {
      this.queryParams.pageIndex = 1
      const prop = actions.get(column.prop)
      if (prop) {
        this.proptype = prop
        if (column.order === 'ascending') {
          this.tableData.sort(this.ascSortFun)
        } else if (column.order === 'descending') {
          this.tableData.sort(this.desSortFun)
        }
      }
    },
    // 升序排列方法
    ascSortFun(a, b) {
      return a[this.proptype] - b[this.proptype]
    },
    // 降序排列方法
    desSortFun(a, b) {
      return b[this.proptype] - a[this.proptype]
    }