前端使用el-table自带排序功能\后端排序

晨晨晨翔啊～126

已于 2024-04-21 11:13:54 修改

阅读量926

点赞数 4

文章标签：前端 java spring boot visual studio vue.js javascript spring cloud

于 2024-04-21 11:10:41 首次发布

本文链接：https://blog.csdn.net/m0_60594323/article/details/138027237

版权

本文讲述了在Vue应用中，如何使用Element-UI库的el-table组件实现前端和后端排序功能，包括使用`sortable=“custom”`标识，监听`@sort-change`事件以及后端对不同字段的特殊处理。

摘要由CSDN通过智能技术生成

排序可以分成两种类型的：

一种是只在前端页面进行排序，不能跨页面排序；

另外一种是需要后端排序，需要调用后端接口处理

前端处理：

这里使用的是，需要后端进行排序

在需要使用排序的列上添加 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