Antd中s-table组件某字段进行排序

Antd中s-table组件某字段进行排序

提前说明,s-table组件包含分页等功能

	<s-tableref="table":columns="columns":data="loadData"bordered:row-key="(record) => record.id"></s-table>

而其中loadData为获取表数据的方法,且每次获取时都会自动传递一些数据,如当前页等:

	const columns = [{title: '名称',dataIndex: 'name'}}// searchFormState中包含其他的查询条件字段let searchFormState = reactive({})const loadData = (parameter) => {// parameter为该组件传入的数据return xxxApi.jobPage(Object.assign(parameter, searchFormState)).then((data) => {return data})}

以下是当前示例的parameter数据:

{"current": 1,"size": 10
}

得到的parameter如图:parameter

sorter中进行比较

const columns = [{title: '新用户数',dataIndex: 'newUser',sorter: {compare: (a, b) => a.newUser - b.newUser},align: 'center'},{title: '充值金额',dataIndex: 'payFee',sorter: {compare: (a, b) => a.payFee - b.payFee},align: 'center'}
}

后端不需要改变,但是这样的话,顺序如下:
现有一组数据:0.88、2.00、3.00、4.00、5.00、6.00、1.88、6.00、8.00、8.00、9.00、7.00;分页:每页10条
默认情况下:
第一页:0.88、2.00、3.00、4.00、5.00、6.00、1.88、6.00、8.00、8.00;
第二页:9.00、7.00;
点击升序:
第一页:2.00、3.00、4.00、5.00、6.00、6.00、7.00、8.00、8.00、9.00;
第二页:0.88、1.88;
点击降序:
第一页:9.00、8.00、8.00、7.00、6.00、6.00、5.00、4.00、3.00、2.00;
第二页:1.88、0.88;
即它会将所有数据按照降序排列,之后进行分页,对每一页再进行升序降序排列;尝试了sorter: {compare: (a, b) => b.payFee - a.payFee},得到的结果依旧如此。

开启sorter传入后端查询

在新增columns中每列属性中加入sorter: true;

const columns = [{title: '新用户数',dataIndex: 'newUser',sorter: true,align: 'center'},{title: '充值金额',dataIndex: 'payFee',sorter: true,align: 'center'}
}

如果点击这两列进行排序(前提是点击了这两列进行升序/降序,不然不会传入数据)const loadData = (parameter) => {}中得到的parameter还包含了sortFieldsortOrder,当前点击充值金额列得到的parameter如下:

{"current": 1,"size": 10,"sortField": "payFee","sortOrder": "ascend",
}
{"current": 1,"size": 10,"sortField": "payFee","sortOrder": "descend",
}

则此时后端也需要接收这两个字段,如下:

    // 排序字段@ApiModelProperty(value = "排序字段,字段驼峰名称,如:payFee")private String sortField;// 排序方式@ApiModelProperty(value = "排序方式,升序:ascend;降序:descend")private String sortOrder;

此时查询逻辑如下:

        if(ObjectUtil.isAllNotEmpty(param.getSortField(), param.getSortOrder())) {// 当前排序字段是否合法CommonSortOrderEnum.validate(param.getSortOrder());// 根据sortField参数字段payFee进行排序// 解释:orderBy(boolean condition, boolean isAsc, R column)queryWrapper.orderBy(true, param.getSortOrder().equals(CommonSortOrderEnum.ASC.getValue()),StrUtil.toUnderlineCase(param.getSortField()));} else {// 否则按创建时间升序queryWrapper.lambda().orderByAsc(TableEntity::getCreateTime);}

通用排序方式枚举类如下(注意,因为前端传入的是小写的,所以此处也用小写的):

@Getter
public enum CommonSortOrderEnum {/** 升序 */ASC("ascend"),/** 降序 */DESC("descend");private final String value;CommonSortOrderEnum(String value) {this.value = value;}public static void validate(String value) {boolean flag = ASC.getValue().equals(value) || DESC.getValue().equals(value);// 如果上述是大写,则需要加入toLowerCase()方法将字段转换为小写// boolean flag = ASC.getValue().toLowerCase().equals(value) || DESC.getValue().toLowerCase().equals(value);// 但是同时在逻辑中不能再使用:param.getSortOrder().equals(CommonSortOrderEnum.ASC.getValue())// 要修改为param.getSortOrder().equals(CommonSortOrderEnum.ASC.getValue().toLowerCase())if(!flag) {throw new CommonException("不支持该排序方式:{}", value);}}
}

此时查询出来结果与第一个方法不一致,此时不会先倒序排列再分页排序,该方法直接是在数据库中将所有数据按照sortOrder字段进行排序,之后再分页!!!
所以结果如下:
升序:
第一页:0.88、1.88、2.00、3.00、4.00、5.00、6.00、6.00、7.00、8.00;
第二页:8.00、9.00;
降序:
第一页:9.00、8.00、8.00、7.00、6.00、6.00、5.00、4.00、3.00、2.00;
第二页:1.88、0.88;

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

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

相关文章

线性表的顺序存储实验

附 录 #include<stdio.h> #include<stdlib.h>typedef struct {double* data;int length; }Sqlist;void initSqlist(Sqlist* L, int n) {L->data (double*)malloc(n * sizeof(double)); if (L->data NULL){printf("内存分配失败\n");exit(1);}pri…

MTK安卓开发板_联发科开发板评估套件_安卓主板硬件开发

在介绍开发板之前&#xff0c;让我们先来区分一下核心板和开发板的区别。核心板是一种集成度高、功能完整的计算模块&#xff0c;搭载系统&#xff0c;简化了外围接口&#xff0c;体积尺寸相对较小&#xff0c;主要适用于嵌入式系统。而开发板由核心板底板组成&#xff0c;提供…

Python实战:采集全国5A景点名单

本文将以采集全国 5A 景点名单为例&#xff0c;详细介绍如何使用 Python 进行数据采集。 本文采集到全国340家5A景区的名单&#xff0c;包括景区名称、地区、 A级、评定年份这些字段。 一、分析数据源 为了获取权威数据&#xff0c;我们来到主管部门的官方网站&#xff0c;在右…

Java集合中经典的 5种设计模式,打死也要记住啊!

集合 一、 迭代器模式(Iterator Pattern)二、 工厂模式(Factory Pattern)三、 装饰器模式(Decorator Pattern)四、 适配器模式(Adapter Pattern)五、 组合模式(Composite Pattern) Java 集合框架中的 List、Set、Map 以及其实现类都使用了多种经典的设计模式 一、 迭代器模式(I…

测试用例是什么?怎么写?不会测试用例的看过来,

前言 今天笔者想和大家来聊聊测试用例&#xff0c;这篇文章主要是想要写给测试小伙伴们的&#xff0c;因为我发现还是有很多小伙伴在遇到写测试用例的时候无从下手&#xff0c;我就想和大家简单的聊聊&#xff0c;这篇文章主要是针对功能测试的哟。 一、什么是测试用例&#…

Flask开发类似jenkins构建自动化测试任务工具

1、自动化 某一天你入职了一家高大上的科技公司&#xff0c;开心的做着软件测试的工作&#xff0c;每天点点点&#xff0c;下班就走&#xff0c;晚上陪女朋友玩王者&#xff0c;生活很惬意。 但是美好时光一般不长&#xff0c;这种生活很快被女主管打破。为了提升公司测试效率…

有了HTTP协议,为什么还要有WebSocket

HTTP的缺陷 现在的应用场景可能更多的是&#xff0c;前端发起一次HTTP请求&#xff0c;服务器后端返回一次HTTP响应。但是有这样的场景&#xff0c;是需要服务器主动给前端发送请求的。 最常见的场景是扫码登陆。 这里有两种解决方案&#xff0c;一种是微信的解决方案&#xf…

YOLOv5算法进阶改进(19)— 在主干网络中引入SAConv | 轻量化的可切换空洞卷积

前言:Hello大家好,我是小哥谈。Switchable Atrous Convolution(SAC)是一种用于图像处理和计算机视觉任务的卷积神经网络(CNN)操作。它是在传统的空洞卷积的基础上进行改进的。传统的空洞卷积是一种通过在卷积核中引入空洞(或称为膨胀率)来扩大感受野的技术。然而,传统…

网络学习:Vlan基础知识、划分思路及其优越性

目录 一、VLAN基础知识 二、VLAN的划分方法 1. 基于端口划分的VLAN 2. 基于MAC地址划分VLAN 3. 基于网络层协议划分VLAN 4. 根据IP组播划分VLAN 5. 按策略划分VLAN 6. 按用户定义、非用户授权划分VLAN 三、VLAN的优越性 1. 增加了网络连接的灵活性 2. 控制网络上的广…

企业信息化转型之企业统一门户搭建

一、当前企业门户实施的背景和痛点 企业随着公司业务的发展&#xff0c;公司运作的复杂度在不断加大&#xff0c;各部门的业务量和业务的复杂度都在不断增加&#xff0c;已经建设了ERP、HR、OA、考勤、合同、BPM、PLM等有效地支撑了过去和现有业务的发展。 企业在信息化办公是…

Github上哪些好用的工具

专注于web漏洞挖掘、内网渗透、免杀和代码审计&#xff0c;感谢各位师傅的关注&#xff01;网安之路漫长&#xff0c;与君共勉&#xff01; Qexo-爱写博客的师傅强烈推荐 漂亮的 Hexo 静态博客编辑器。该项目是基于 Django 的 Hexo 静态博客管理后台&#xff0c;支持文章管理、…

(开源项目)OpenHarmony、社区共建Sample合入要求

1.新增Sample功能不能重复于当前已有Sample的功能&#xff1b; 2.新增Sample的工程推荐使用ArkTS语言编写&#xff1b; 3.新增Sample的工程推荐使用Stage模型编写&#xff1b; 4.新增Sample的工程中需要包含UI自动化用例&#xff08;ohosTest工程模块&#xff09;&#xff0…

AM和FM是啥意思?有啥区别?

同学们大家好&#xff0c;今天我们继续学习杨欣的《电子设计从零开始》&#xff0c;这本书从基本原理出发&#xff0c;知识点遍及无线电通讯、仪器设计、三极管电路、集成电路、传感器、数字电路基础、单片机及应用实例&#xff0c;可以说是全面系统地介绍了电子设计所需的知识…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的条形码二维码检测系统(深度学习+UI界面+训练数据集+Python代码)

摘要&#xff1a;在物流和制造业中&#xff0c;开发一套高效的条形码与二维码识别系统显得尤为关键。本博文深入探讨了如何利用深度学习技术打造出一套先进的条形码及二维码检测系统&#xff0c;并且提供了一套完整的实施方案。该系统搭载了性能卓越的YOLOv8算法&#xff0c;并…

面试题:从输入网址到页面显示的全过程(超详细解析)

面试题&#xff1a;从输入网址到页面显示的全过程 01. 要看到一个网页&#xff0c;我们需要什么&#xff1f; 我们现在经常使用的网页其实是由三种语言书写而来的&#xff1a;HTML、Css 和 JavaScript&#xff0c;它们分别负责网页的结构、网页的样式和网页的交互功能&#xf…

【C#语言入门】17. 事件详解(上)

【C#语言入门】17. 事件详解&#xff08;上&#xff09; 一、初步了解事件 定义&#xff1a;单词Event&#xff0c;译为“事件” 通顺的解释就是**“能够发生的什么事情”**&#xff0c;例如&#xff0c;“苹果”不能发生&#xff0c;但是“公司上市”这件事能发生。在C#中事…

基于springboot+vue实现校企合作项目管理系统项目【项目源码+论文说明】

基于springboot实现校企合作项目管理系统演示 摘要 这是一个计算机的时代&#xff0c;在计算机应用非常广泛的时代中&#xff0c;用计算机来完成对信息的处理有着非常好的使用效果。特别是针对学校而言亦是如此&#xff0c;通过在学校中的信息化建设&#xff0c;能够很好的提升…

1.1计算机系统构成及硬件系统知识(下)

1、定点数与浮点数 定点整数的小数点在最低有效数位之后&#xff0c;也就是00000000.&#xff1b; 因为定点整数只表示整数&#xff0c;不涉及小数&#xff1b; 定点小数的小数点在符号位之后&#xff0c;也就是最高有效数位之前&#xff0c;也就是0.0000000&#xff1b; 浮点…

在线安装QT Creator 版本(自带编译套件)

在线版下载Qt6最新版本 第一步&#xff1a;进入archive目录 第二步&#xff1a;进入online_installers目录 第三步&#xff1a;进入目前在线安装包最新版本4.7 第四步&#xff1a;选择下载windows版本的在线安装包 如果出现以下错误&#xff0c;访问不了&#xff0c;则启动…

2024年GitHub标星2-9K的Android基础——高级面试题合集

3、横竖屏切换时候 Activity 的生命周期 4、AsyncTask 的缺陷和问题&#xff0c;说说他的原理。 5、onSaveInstanceState() 与 onRestoreIntanceState() Android高级面试题 1、你们做了哪些稳定性方面的优化&#xff1f; 2、性能稳定性是怎么做的&#xff1f; 3、业务稳定性如…