一个项目常用的搜索已经可以满足客户的需求，不过他们有看到过其他系统有按照某N列进行排序， 因此客户要求我们的表格可以按照指定的N个列进行排序来增加他们的操作体验。客户的系统的数据量比较小，N个列排序对性能没什么影响。

实现完成后，想对哪列排序只需在el-column 加入 sortable="custom" 即可，无需加入其他任何代码。

我们目前的系统采用SpringBoot+ElementUI

elementui

ElementUI的表格远程排序比较简单

1、el-table 加上 @sort-change=”sortChange” ，在column上加上sortable="custom"

<el-table  :data="dataList"  border  v-loading="dataListLoading"  @selection-change="selectionChangeHandle"  @sort-change="sortChange"  size="mini"  style="width: 100%;">

<el-table-column    prop="visitCnt"    header-align="center"    align="center"    sortable="custom"    width="200"    label="访问次数"></el-table-column>

2、在data上定义

data () {  return {    columnOrder: {},  }}

3、定义sortChange

sortChange (sortParams) {  this.columnOrder = {}  if (sortParams.prop) {    this.columnOrder[sortParams.prop] = sortParams.order  }  this.getDataList()},

4、getDataList传递排序参数

params: {  'page': this.pageIndex,  'limit': this.pageSize,  'orders': this.columnOrder}

后端解析前端传过来的排序参数，由于前端传递过来的排序参数是

排序参数

后端需解析该参数，并将排序加到sql的最后

protected void buildOrderMap(Map<String, Object> params) {    if (params.get("orders") != null) {        JSONObject orderJson = JSON.parseObject((String)params.get("orders"));        Set<Map.Entry<String, Object>> set = orderJson.entrySet();        if (set.size() == 0) {            params.put("orders", null);        }        for (Map.Entry<String, Object> map : set) {            if (map.getValue() == null) {                params.put("orders", null);                break;            }            if (map.getValue().toString().equalsIgnoreCase("descending")) {                String columnName = StringHelper.humpToUnderline(map.getKey());                params.put("orders", columnName + " desc");                break;            } else if (map.getValue().toString().equalsIgnoreCase("ascending")){                String columnName = StringHelper.humpToUnderline(map.getKey());                params.put("orders", columnName + " asc");                break;            }        }    }}

在sql中加入排序，目前是mybatis加入如下代码，对于jpa和hibernate类似

<if test=”params.orders != null”>    order by ${params.orders}</if>

以上前后端开发完毕，

如果需要在指定的多个列中加入排序，则只需在对应的el-column中加入

sortable="custom" 即可，无需加入其他任何代码