前端使用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排序功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue在 for 循环里使用异步调用 async/await的方法
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍vue 如何在 for 循环里面使用异步调用 async/await,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue自动构建发布脚本的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家详细介绍了vue项目实现按钮可随意移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇vue项目中跳转到外部链接的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于vue3.0中使用element的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
vue3 ts组合式API异常onMounted is called when&
这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
目中出现多级菜单时,需要多层for循环时,但是当菜单增加层级时,需要在页面结构中增加一层for循环,这时我们可以使用组件递归的思想来实现,下面这篇文章主要给大家介绍了关于vue业务实例之组件递归及其应用的相关资料,需要的朋友可以参考下2022-05-05
最新评论