vue element table表格自定义排序规则

最新推荐文章于 2026-04-17 10:43:59 发布

原创最新推荐文章于 2026-04-17 10:43:59 发布 · 5.1k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

element ui

5 篇文章

订阅专栏

本文介绍如何在前端使用El-Table组件进行自定义排序，确保后台返回的合计行在排序后始终显示在最后。通过监听`sort-change`事件，处理排序逻辑，对包含百分比的数据进行转换，并在比较时为'合计'行赋予特殊值以使其保持在底部。

项目需求：前端做排序，后台返回的数据有合计一项，排序时，合计始终在最后一行
在这里插入图片描述

使用

@sort-change='sortChange'

   <el-table-column
      prop="revPar"
      align='center'
      sortable="custom"  
      label="RevPAR"
      width="110">
    </el-table-column>

sortChange(column){
      let arr = []
      this.tableData.forEach(val=>{
        arr.push(val)
      })
      if(column.order=='descending'){
        this.tableDatalist = arr.sort((a, b) => {
          let aVal =0
          if(String(a[fieldName]).indexOf('%')!=-1){
            aVal = Number(a[fieldName].split('%')[0])
          }else{
           aVal = Number(a[fieldName])
          }
          let bVal =0
          if(b[fieldName].indexOf('%')!=-1){
            bVal = Number(b[fieldName].split('%')[0])
          }else{
           bVal = Number(b[fieldName])
          }
          if (a.name == '合计') {
            aVal = -9999
          }
          if (b.name == '合计') {
            bVal = -9999
          }
          return bVal - aVal
        })
      }else if(column.order=='ascending'){
        this.tableDatalist = arr.sort((a, b) => {
          let aVal =0
          if(a[fieldName].indexOf('%')!=-1){
            aVal = Number(a[fieldName].split('%')[0])   //因为数据中有%,没有的话可以去掉
          }else{
           aVal = Number(a[fieldName])
          }
          let bVal =0
          if(b[fieldName].indexOf('%')!=-1){
            bVal = Number(b[fieldName].split('%')[0])
          }else{
           bVal = Number(b[fieldName])
          }
          if (a.name == '合计') {
            aVal = 9999
          }
          if (b.name == '合计') {
            bVal = 9999
          }
          return aVal - bVal
        })
      }else{
        this.tableDatalist = this.tableData
      }
    },

具体操作根据业务需求自行修改