若依框架实现排序【升序或降序】很简单

前端实现

1. 在表格上加监听函数@sort-change。如下红框所示:


2. 在表行上加排序字:sort-orders,可排序字sortable。如下红框所示:

3. 添加监听函数实现。代码如下:

handleSortChange(column) {this.queryParams.orderByColumn = column.prop;//查询字段是表格中字段名字this.queryParams.isAsc = column.order;//动态取值排序顺序this.getList();}

完整代码如下:.

<el-table v-loading="loading" :data="liquid_heightList" @selection-change="handleSelectionChange" @sort-change="handleSortChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="时间" align="center" prop="dateTime" width="95" :sort-orders="['descending','ascending']" sortable="custom"><template slot-scope="scope"><span>{{ parseTime(scope.row.dateTime, '{h}:{i}:{s}') }}</span></template></el-table-column></el-table>method:{//排序,倒序handleSortChange(column) {this.queryParams.orderByColumn = column.prop;//查询字段是表格中字段名字this.queryParams.isAsc = column.order;//动态取值排序顺序this.getList();}
}

后端实现

只需在对应的xml文件中的selectXXList里面加上参数解析即可,如下本文展示的案例,是在selectLiquidHeightList中添加方法。

以上步骤操作到这,就实现了数据列表的倒序排序了。重新启动服务就可以看到实际效果了:

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

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

相关文章

使用emu8086实现——循环结构程序设计

一、实验目的 1.掌握循环结构程序设计的方法&#xff1b; 2.掌握数据块传送程序设计的方法&#xff1b; 3.掌握串传送指令的应用。 二、实验内容 1、计算S12*33*4...N*(N1)&#xff0c;直到N*(N1)项大于200为止。编写程序&#xff0c;计算上式的结果。 代码及注释&#…

考研经验总结——目录

文章目录 一、写作顺序二、个人情况说明三、读评论四、一些小牢骚五、一些注意事项&#xff08;持续更新&#xff09; 一、写作顺序 我将准备从三个阶段开始介绍吧 考研前考研中考研后&#xff08;也就是现在我的这种情况&#xff09; 考研前我会分为&#xff1a;数学、专业…

国图公考:2024山东省事业单位发布招聘公告

更多信息可以登录山东人事考试信息查看&#xff01;

webpack执行流程知识点总结

webpack的运行流程 Webpack 的运行流程是一个串行的过程&#xff0c;从启动到结束会依次执行以下流程&#xff1a; 在以上过程中&#xff0c;Webpack 会在特定的时间点广播出特定的事件&#xff0c;插件在监听到感兴趣的事件后会执行特定的逻辑&#xff0c;并且插件可以调用 We…

艾瑞报告:HR数字化需关注体系化能力,红海云等标杆厂商引领一体化趋势

新全球化时代背景下&#xff0c;企业经营所面临的国内外环境的不确定性增强&#xff0c;如何从不确定性中找到确定性成了大多数企业的关注要点。近日&#xff0c;艾瑞咨询发布《2023中国人力资源数字化研究报告》&#xff0c;从数字化转型的角度切入&#xff0c;探讨数字化如何…

原型设计工具Axure RP结合内网穿透实现本地web页面公网访问协同办公

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

进阶Docker3:Dokerfile构建镜像

目录 Dockerfile 构建基础镜像 基本机构 命令&#xff1a; 命令解释&#xff1a; 准备工作 创建镜像 上传镜像 Dockerfile Dockerfile 是一个文本格式的配置文件&#xff0c; 用户可以使用 Dockerfile 来快速创建自定义的镜像&#xff0c;另外&#xff0c;使 用Docke…

neo4j图数据库的简单操作记录

知识图谱文件导出 首先停止运行sudo neo4j stop然后导出数据库 导出格式为&#xff1a; 具体命令如下sudo neo4j-admin database dump --to-path/home/ neo4j最后重启sudo neo4j start知识图谱外观修改 在网页点击节点&#xff0c;选中一个表情后点击&#xff0c;可修改其颜…

Beauty algorithm(七)瘦脸

瘦脸的实现采用局部平移法。 一、skills 前瞻 局部平移 二、目标区域定位 左脸: 关键点选择3、5点,基点30 rmax:计算两点5-3间的距离, |x-c|:图像任一点到固定基点c的距离 |m-c|:两固定点距离 右脸: 关键点选择

开发企业微信中的内嵌h5时如何开发与调试

前言&#xff1a; 在我们的项目中&#xff0c;开发企业微信内部的项目的话&#xff0c;分为两种&#xff0c;1种是直接开发企业微信的小程序&#xff0c;另一种则是企业微信内嵌我们的H5界面&#xff0c;我们这里讲一讲企业微信内嵌h5的方法与注意点。 1、开发h5项目 这点没有…

muduo网络库剖析——套接字Socket类

muduo网络库剖析——套接字Socket类 前情从muduo到my_muduo 概要socket网络编程socket编程接口介绍头文件socketbindlistenacceptaccept4connect 框架与细节成员函数使用方法 源码结尾 前情 从muduo到my_muduo 作为一个宏大的、功能健全的muduo库&#xff0c;考虑的肯定是众多…

Vue3-46-Pinia-获取全局状态变量的方式

使用说明 在 Pinia 中&#xff0c;获取状态变量的方式非常的简单 &#xff1a; 就和使用对象一样。 使用思路 &#xff1a; 1、导入Store&#xff1b;2、声明Store对象&#xff1b;3、使用对象。 在逻辑代码中使用 但是 Option Store 和 Setup Store 两种方式定义的全局状态变量…

推荐一款实用的免费开源局域网传输工具!轻松搭建网盘的神器!

本文小编给大家分享一款免费开源软件 Filebrowser&#xff0c;使用它可以轻松搭建属于你的个人网盘和网页版文件管理器。 它能做什么呢&#xff1f;想必大家也都用过百度网盘或阿里云盘之类的云存储服务&#xff0c;将自己的所有数据都存储在别人的服务器上&#xff0c;所谓的在…

如何实现一个好用的全链路多测试环境(HTTP篇)

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 背景 随着公司的发展&#xff0c;研发的系统和开发人员会变得越来越多。但是测试环境却始终只有一个&#xff0c;所以久而久之&#xff0c;我们就发现研发经常遇…

融云 CEO 董晗荣获 51CTO 「2023 年度科技影响力人物奖」

1 月 5 日&#xff0c;由知名 IT 技术媒体 51CTO 主办的第十八届“中国企业年终评选”正式揭晓榜单&#xff0c;融云 CEO 董晗荣获“2023 年度科技影响力人物奖”。关注【融云全球互联网通信云】了解更多 经过十余年的经验积累&#xff0c;“中国企业 IT 印象”已成为各行业客户…

以太网交换机——稳定安全,构筑数据之桥

交换机&#xff0c;起源于集线器和网桥等网络通信设备&#xff0c;它在性能和功能上有了很大的发展&#xff0c;因此逐渐成为搭建网络环境的常用的设备。 随着ChatGPT爆发&#xff0c;因为用户量激增而宕机事件频频发生&#xff0c;云计算应用催生超大规模算力需求&#xff0c;…

CompletableFuture原理与用法

CompletableFuture 是由Java8引入的&#xff0c;这让我们编写清晰可读的异步代码变得更加容易&#xff0c;该类功能比Future 更加强大。 什么是 CompletableFuture 在Java中CompletableFuture用于异步编程&#xff0c;异步通常意味着非阻塞&#xff0c;运行任务单独的线程&…

Stream流递归查询部门树

Java 递归查询树是很常见的功能&#xff0c;也有很多写法&#xff0c;小编这里记录stream流递归部门树写法&#xff0c;自从小编用上stream流之后&#xff0c;是爱不释手&#xff0c;的确是个不错的好东西&#xff0c;话不多说&#xff0c;直接上代码 第一步&#xff1a;先创建…

云联接:揭开SD-WAN神秘面纱,颠覆你对网络的认知!

云联接&#xff08;Cloud Connect&#xff09;源于软件定义广域网&#xff08;SD-WAN&#xff09;。 软件定义广域网由于技术应用性强&#xff0c;近年来从一个由软件定义网络&#xff08;SDN&#xff09;部分衍生的分支概念发展为大规模普适的实践技术&#xff0c;已成为建立…

拼多多今年的校招薪资。。。

拼多多校招情况分析 关于校招情况分析&#xff0c;我们写过了争议巨巨巨巨大的 华为、互联网宇宙厂 字节跳动 以及如今有点高攀不起的新能源车企 比亚迪。 群里收集过小伙伴的意见&#xff0c;除上述大厂以外&#xff0c;大家最感兴趣的还是市值刚超过阿里的砍厂&#xff1a;拼…