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属性用…

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年上海交大毕业&…

使用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 计算…

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

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

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…

FreeGPT3.5 开源软件

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

服务器数据恢复—V7000存储raid5数据恢复案例

服务器数据恢复环境&#xff1a; P740AIXSybaseV7000存储阵列柜&#xff0c;阵列柜上有12块SAS机械硬盘&#xff08;包括1块热备盘&#xff09;。 服务器故障&#xff1a; 管理员在日常巡检过程中发现阵列柜中有一块磁盘发生故障&#xff0c;于是更换磁盘并同步数据&#xff0…

快速熟悉torchdiffeq用法,从数理逻辑到完整案例【第二部分】

本系列文章板块规划 提示&#xff1a;以下内容仅为个人学习感悟&#xff0c;无法保证完全的正确和权威&#xff0c;大家酌情食用谢谢。 第一部分 torchdiffeq背后的数理逻辑 第二部分 torchdiffeq的基本用法 第三部分 trochdiffeq的升级用法 第四部分 torchdifffeq的案例和代码…

C++11:function包装器

包装器&#xff0c;体现了C11中的封装性&#xff0c;包装器可以应用于&#xff1a;函数指针&#xff0c;仿函数&#xff0c;lambda 而包装器function的出现刚好也弥补了上述三种语法的不足之处 函数指针写起来较为复杂&#xff0c;而仿函数之间类型不同&#xff0c;lambda则在…

数学建模笔记(10)整数规划和0-1规划

前由 显然通关次数不能是小数&#xff0c;这就涉及到了整数问题。 定义 例题

最新mysql8.3 保姆级 主从复制搭建教程

mysql 主从复制搭建 服务器配置表 机器ip操作系统主机192.168.31.25华为openEuler-22.03-LTS-SP3从机192.168.31.184华为openEuler-22.03-LTS-SP3从机192.168.31.228华为openEuler-22.03-LTS-SP3 1、在3台机器上安装独立的 mysql 1.1 创建myql文件夹用来存放mysql包 mkdir…