Element-ui el-table表格排序

实现下图效果

表格数据可自选列排序，这种需求一般分为俩种实用场景，一种是当前页面数据排序，另一种是对所有数据按条件顺序排序再分页，下面分别介绍俩种场景的实现

一、当页数据排序

比较简单，只会涉及前端，加上:sortable="true"即可

<el-table-column
  prop="recruitTarget"
  label="目标"
  width="112"
  show-overflow-tooltip
  :sortable="true"
>

若需要自定义排序函数，则可以使用

:sort-method="sortData",sortData是函数名

二、全数据排序

全数据排序需要涉及后端代码改造

前端上

<el-table
  ...
  @sort-change="sortByColumn"
 >

<el-table>标签里加上@sort-change="sortByColumn" sortByColumn是排序函数

需要排序的列里加上sortable='custom'

<el-table-column
  prop="recruitEntryNum"
  label="人数"
  width="140"
  show-overflow-tooltip
  sortable='custom'
>

点击按钮，排序函数即可接收到column变量，一般来说order，prop俩个参数即可

sortByColumn排序函数里将参数保存传到后端处理

sortByColumn(column){
  this.queryTableForm.orderColumn = column.prop
  this.queryTableForm.orderWay = column.order
  this.queryTableData() 
}

后端拿到参数后可以通过很多方式实现排序，这里展示一个比较简单的，使用mybatisPlus,为简化流程不用lambda查询

// 根据传入的列自定义排序
QueryWrapper<类名> wrapper = new QueryWrapper<>();
if (StringUtil.isNotEmpty(toUnderScoreCase(queryParam.getOrderColumn()))) {
    if (StringUtil.isNotEmpty(queryParam.getOrderWay())) {
        if (queryParam.getOrderWay().equals(SortWayEnum.ASC.getCode())) {
            wrapper.orderByAsc(toUnderScoreCase(queryParam.getOrderColumn()));
        } else if (queryParam.getOrderWay().equals(SortWayEnum.DESC.getCode())) {
            wrapper.orderByDesc(toUnderScoreCase(queryParam.getOrderColumn()));
        }
    }
}

/**
 * 驼峰转下划线命名
 */
public static String toUnderScoreCase(String str) {
    try{
        if (StringUtil.isEmpty(str)) {
            return "";
        }
        String[] parts = str.split("(?=[A-Z])");
        String resStr = String.join("_", parts).toLowerCase();
        return resStr;
    }catch(Exception e){
        log.info("驼峰转下划线命名异常");
        return "";
    }
}

toUnderScoreCase是驼峰转下划线逻辑，这里随便写了一个

然后就可以实现全数据自定义列排序啦