前端使用el-table自带排序功能\后端排序方法实例

<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();
  }
},

// 前端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);