YUDAO源码中的正序倒序表格ElmentUI的实现,与后端的配合?

前端展示和实现:

1. elmentUI表格的定义

2. JS请求参数改造

 <!-- 列表 --><el-table v-loading="loading" :data="list"   @sort-change="handleSortChange"><el-table-column label="Expiry Date" prop="expiry_date"     sortable><template slot-scope="{ column }"><span>{{ column.label }}</span><el-icon v-if="column.property === currentSort.prop" :class="currentSort.order === 'ascending' ?'el-icon-arrow-up' : 'el-icon-arrow-down'"></el-icon></template></el-table-column>
data() {return {currentSort: { // 当前排序状态prop: '', // 排序的属性order: '' // 排序顺序,可选值为 ascending 和 descending},....methods: {//捕捉事件handleSortChange({ column, prop, order }) {console.log(`排序属性: ${prop}, 排序方向: ${order}`);this.currentSort.prop = prop;this.currentSort.order = order;this.getList()// 在这里可以实现自定义排序逻辑,例如对tableData进行排序处理},
....//改造请求参数addOrderFields(){let sortingFields =[]if(this.currentSort.prop !== ''){let sortObj={field:this.currentSort.prop,order:''}if(this.currentSort.order == 'ascending'){sortObj.order = 'asc'}else{sortObj.order ='desc'}sortingFields.push(sortObj)this.queryParams.sortingFields= sortingFields}},

后端配合:

控制器:

POST方式和@RequestBody CertPageReqVO的配合

@PostMapping("/page")
@PreAuthorize("@ss.hasPermission('cert::query')")
public CommonResult<PageResult<CertRespVO>> getPage(@RequestBody CertPageReqVO pageVO ) {return success(Service.getPageOfCertRespVo(pageVO));
}

 //加入排序的接收参数 

@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
public class CertPageReqVO extends PageParam {//加入排序的接收参数private Collection<SortingField> sortingFields;

Mapper实现:

改造selectPage()

IPage<CertDO> mpPage = MyBatisUtils.buildPage(reqVO,reqVO.getSortingFields());

@Mapper
public interface CertMapper extends BaseMapperX<CertDO> {default PageResult<CertDO> selectPage(CertPageReqVO reqVO) {LambdaQueryWrapperX<CertDO> ew= new LambdaQueryWrapperX<CertDO>().likeIfPresent(CertDO::getName, reqVO.getName()).likeIfPresent(CertDO::getDescription, reqVO.getDescription()).orderByDesc(CertDO::getId);if (reqVO.PAGE_SIZE_NONE.equals(reqVO.getPageSize())) {List<CertDO> list = selectList(ew);return new PageResult<>(list, (long) list.size());}// MyBatis Plus 查询IPage<CertDO> mpPage = MyBatisUtils.buildPage(reqVO,reqVO.getSortingFields());selectPage(mpPage, ew);// 转换返回return new PageResult<>(mpPage.getRecords(), mpPage.getTotal());}

已经实现的原理 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue第三方组件使用

文章目录 一、组件传值二、elementui组件使用三、fontawesome图标 一、组件传值 1、父组件与孩子组件传值 在孩子组件中定义props属性&#xff0c;里面定义好用于接收父亲数据的变量。 孩子组件是Movie Movie.vue。注意看在Movie组件里面有props对象中的title和rating属性用…

PDF Guru 通用型PDF文件处理工具

## 项目简介 PDF Guru是一个通用型PDF文件处理工具&#xff0c;包含PDF合并、拆分、旋转、水印、加密、转换等20多项常用功能&#xff0c;完全开源&#xff0c;个人免费使用&#xff0c;界面简洁&#xff0c;简单易用。 虽然目前网上关于PDF处理的工具有很多&#xff0c;但是…

flutter ListView在TabBar在Column在SingleChildScrollView

flutter ListView在TabBar在Column在SingleChildScrollView _大数据知识库 我得到的异常为A RenderBox object must have an explicit size before it can be hit-tested. Make sure that the RenderBox in question sets its size during layout. 解决办法&#xff1a;添加w…

LMDeploy 推理部署工具

一. 大模型部署面临的挑战 1. 计算量巨大 大模型参数量巨大&#xff0c;前向推理时需要进行大量计算。 2. 内存开销巨大 大模型在推理过程中&#xff0c;以FP16为例&#xff0c;20B模型仅加载参数就需40G显存&#xff0c;175B模型更是需要350G显存。同时在推理过程中&#xff…

项目中使用消息队列改进——基于RabbitMQ

使用 RabbitMQ 实现消息队列 导入依赖 <!--AMQP依赖&#xff0c;包含RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> <!--防止消息转…

Jmeter如何录制https的系统性能脚本

在使用jmeter录制性能测试脚本时&#xff0c;会遇到网站为http和https两种情况&#xff0c;略有不同&#xff0c;下面介绍一下&#xff1a; 1.Jmeter录制http 1.测试计划–>添加–>非测试元件–>HTTP(S)测试脚本记录器 【HTTP(S)测试脚本记录器】有的版本叫【HTTP代…

基于ES-EKF的LiDAR/GNSS/IMU传感器融合轨迹估计(附项目源码)

基于改进EKF的LiDAR/GNSS/IMU传感器融合轨迹估计&#xff08;附项目源码&#xff09; 算法概述PredictionCorrectionES-EKF算法融合算法实现轨迹估计实验结果 最近在研究传感器融合&#xff0c;看到一个很好的开源项目&#xff0c;适合小白学习&#xff0c;为以后做传感器融合、…

.net 6 集成NLog

.net 6 webapi项目集成NLog 上代码step 1 添加nugetstep 2 添加支持step 3 添加配置文件 结束 上代码 step 1 添加nuget 添加nuget 包 Roc step 2 添加支持 修改program.cs var builder WebApplication.CreateBuilder(args); // 添加NLog日志支持 builder.AddRocNLog();ste…

贪心算法|860.柠檬水找零

力扣题目链接 class Solution { public:bool lemonadeChange(vector<int>& bills) {int five 0, ten 0, twenty 0;for (int bill : bills) {// 情况一if (bill 5) five;// 情况二if (bill 10) {if (five < 0) return false;ten;five--;}// 情况三if (bill …

Lvs+keepalived+nginx搭建高可用负载均衡集群,爱了爱了

检查 最后启动nginx服务 135配置虚拟网卡 检查 最后启动nginx服务 Nginx.conf配置如下 关闭132的keepalived服务后 浏览器能正常访问 132在keepalived配置中加入脚本 脚本内容 132清除ipvsadm中的规则,vip不见 133收到vip 自我介绍一下&#xff0c;小编13年上海交大毕业&…

Golang 实现一个简单的 RPC 服务

分享一个简单的 rpc 服务框架 一、服务端实现 package mainimport ("log""net""net/rpc" )const HelloServiceName "main.HelloService"type HelloServiceInterface interface {Hello(request string, replay *string) error }func…

使用idea运行程序,发现控制台的中文出现乱码

修改UTF-8发现没有效果&#xff0c;寻找.idea文件夹的encodings.xml文件&#xff0c;将里面的UTF-8全部变成GBK.

了解Vue中的 computed 计算属性

目录 1. computed计算属性介绍和基础语法 1.1. 概念 1.2. 语法 2. “计算属性”和“方法”的对比 2.1. computed 计算属性 2.1.1. 作用 2.1.2. 语法 2.2. methods 方法 2.2.1. 作用 2.2.2. 语法 2.2.3. 缓存特性&#xff08;提升性能&#xff09; 3. computed 计算…

Android 14 vold 分析(1)启动

1.启动 它是从rc文件中启动的&#xff0c;rc文件是second stage init才会解析的&#xff0c;也就是说vold主要作用做second stage mount&#xff0c;那first stage mount是怎么做的呢&#xff0c;第一阶段实际上直接调用的是fs_mgr进行的mount&#xff0c;fs_mgr_do_mount_one…

云原生:5分钟了解一下Kubernetes是什么

在当今的云计算时代&#xff0c;容器化技术变得越来越重要。它能够帮助开发者更高效地部署和管理应用程序。而Kubernetes&#xff0c;作为容器编排领域的领军者&#xff0c;正逐渐成为企业构建和管理云原生应用的核心工具。 近期将持续为大家分享Kubernetes相关知识&#xff…

【C语言】共用体union

【C语言】共用体union&#xff1a; 也称联合体。同一个内存空间用于多个数据的存储。同一时间只能存储一个成员数据。使用内存覆盖技术。新的成员数据会覆盖原来的成员数据。内存大小是最大的成员占用内存大小&#xff0c;且是最大对齐数的整数倍&#xff0c;若不足整数倍&…

sql基础语法

sql基础语法 1. 什么是MySQL1.1 RDBMS 特点1.2 sql分类1.3 数据类型1.4 适应MySQL 2. 代码顺序与后台执行顺序2.1 代码撰写顺序2.2 后台执行顺序 3. 基础查询4. 条件检索5. 分组6. 多表查询6.1 子查询&#xff08;几乎不用&#xff09;6.2 连接查询 7. 常用函数 前同事培训过相…

GitHub 仓库 (repository) Branch - SSH clone URL - Clone in Desktop - Download ZIP

GitHub 仓库 [repository] Branch - SSH clone URL - Clone in Desktop - Download ZIP 1. Branch2. SSH clone URL3. Clone in Desktop4. Download ZIPReferences 1. Branch 显示当前分支的名称。从这里可以切换仓库内分支&#xff0c;查看其他分支的文件。 2. SSH clo…

前端处理axios请求下载后端返回的文件流

需求&#xff1a;点击按钮下载文件&#xff0c;请求后端接口&#xff0c;后端返回文件流&#xff0c;如果遇到错误信息并不能简单的res.message拿到错误提示&#xff0c;而且想要正常下载前端也需要做些处理。 1.请求接口要加上响应类型为blob&#xff0c; responseType: ‘blo…

FreeGPT3.5 开源软件

GPT-3.5不需要付费&#xff0c;也不需要注册用户&#xff0c;可以直接使用了&#xff0c;官方彻底开放了API接口。 该API政策一放开&#xff0c;GitHub很快就已经出现了一个开源项目FreeGPT35&#xff0c;可以自动生成key调用GPT3.5的API接口&#xff0c;再也用不着注册账号和申…