前端使用el-table自带排序功能\后端排序方法实例
作者：晨晨晨翔啊～126
在Vue.js中使用Element UI库时可以通过el-table组件来展示表格数据,并支持列排序,下面这篇文章主要给大家介绍了关于前端使用el-table自带排序功能\后端排序的相关资料,需要的朋友可以参考下
排序可以分成两种类型的：
一种是只在前端页面进行排序，不能跨页面排序；
另外一种是需要后端排序，需要调用后端接口处理
前端处理：
这里使用的是，需要后端进行排序
在需要使用排序的列上添加 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);官方文档：Element - The world's most popular Vue UI framework
总结
到此这篇关于前端使用el-table自带排序功能\后端排序的文章就介绍到这了,更多相关前端el-table排序功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！