前端使用el-table自带排序功能注意

前端排序如果不考虑分页数据，则不用处理。如果需要考虑到分页后的数据也要排序，那么要考虑调用后端重新排序了

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。

如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

如果排序只在当前页面排序，不需要处理，如果 是要分页后还需要继续根据上一页面排序，则添加如下信息

<el-table :data="dataList" @sort-change='sortTableFun'>
  // 需要排序的列添加 sortable="custom" 后端排序
  <el-table-column prop="prodIdName"  label="商品名称" sortable="custom" />  
</el-table>
// 调用后端排序
sortTableFun(val) {
  this.dataForm.orderField = null;
  if (val.order) {
    // val.prop 是排序的字段，即在前端列上绑定的prop上的值
    // <el-table-column prop="prodIdName",注意注意注意：这个值可能是为了展示名称的id值
    // 因此在后端判断是否是这个属性值排序时，还要根据表中具体的值继续排序
    this.dataForm.orderField = val.prop
    // val.order 是排序的方式
    this.dataForm.orderMethod = val.order == "descending" ? "desc" : "asc";
    this.searchQuery();
  }
},

然后在后端获取属性orderField和orderMethod的值，进行对应字段的排序：

案例：

// 前端prop展示prodIdName,但在db中字段是prodId因此这个排序得特殊处理一下
// 注意排序方式比较时，忽略大小写比较equalsIgnoreCase
wrapper.orderBy(request.getOrderField().equals("prodIdName"), 
request.getOrderMethod().equalsIgnoreCase("asc"), Product::getProdId);
wrapper.orderBy(request.getOrderField().equals("price"), 
request.getOrderMethod().equalsIgnoreCase("asc"), Product::getPrice);