排序可以分成两种类型的:
一种是只在前端页面进行排序,不能跨页面排序;
另外一种是需要后端排序,需要调用后端接口处理
前端处理:
这里使用的是,需要后端进行排序
在需要使用排序的列上添加 sortable="custom",并且在el-table添加监听事件@sort-change调用后端接口
sortable="custom" 是一个固定的标识
<el-table :data="dataList" @sort-change='sortTableFun'>
// 需要排序的列添加 sortable="custom" 后端排序
<el-table-column prop="prodIdName" label="商品名称" sortable="custom" />
</el-table>
点击排序列监听事件@sort-change会传递一个对象给我们定义的方法。
这个对象中可以获取到我们需要的两个值,一个是需要排序的值即列上绑定的prop值;以及排序的方式descending。
// 调用后端排序
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);