前端使用el-table自带排序功能\后端排序方法实例
更新时间：2024年08月07日 10:08:51 作者：晨晨晨翔啊～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排序功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vite中的glob-import批量导入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了UNIapp实现局域网内在线升级的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了NUXT SSR初级入门笔记(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本文主要介绍了基于vue-router的matched实现面包屑功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue3.x 自发布以来,凭借其性能的显著提升和更加灵活的组合式 API,已经成为了现代前端开发的重要工具之一,除了基本用法外,Vue3.x 还提供了许多高级功能,本文将和大家一起深入探索Vue3.x中的七大高级用法,需要的朋友可以参考下2024-03-03
这篇文章主要帮助大家简单的理解vue中Props属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
这篇文章主要介绍了关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了IE9 elementUI文件上传的问题解决，有需要了解IE9 elementUI文件上传的朋友可参考。希望此文章对各位有所帮助2018-10-10
这篇文章主要介绍了vue实现lodop打印功能的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要为大家介绍了前端vue-cropperjs实现图片裁剪方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论