vxe-table——实现切换页码时排序状态的回显问题(ant-design+elementUi中table排序不同时回显的bug)——js技能提升

之前写的后台管理系统,都是用的antd+elementtable组件中的【排序】问题是有一定的缺陷的。
想要实现的效果:
在这里插入图片描述

antv——table组件一次只支持一个参数的排序

如下图:
在这里插入图片描述
就算是可以自行将排序字段拼接到列表接口的入参中,页面中字段的排序也是只有一个的。不会同时显示排序的状态。比如像下面的
在这里插入图片描述

element——table组件一次只支持一个参数的排序

在这里插入图片描述
就连【default-sort】默认的排序参数,都只是一个对象,而非是一个数组。
在这里插入图片描述
没有办法实现我们想要的多个参数同时排序并且回显的效果。
在这里插入图片描述
前几天写的文章中的vxe-table组件可以实现这样的效果。

vxe-table组件实现多个参数同时排序的效果

感觉官网上有一部分内容还是不太好看的,只有真正用到了,才能明白其中的含义。

 <vxe-tablesize="small"borderresizableref="xTable1"id="toolbar_demo5":custom-config="customConfig"show-overflow="tooltip":sort-config="sortConfig":row-config="rowConfig":checkbox-config="checkboxConfig":data="dataSource":loading="loading"@checkbox-change="wipCheckboxChange"@checkbox-all="wipCheckboxAll"@sort-change="wipSortChange">....</vxe-table>

关于排序,这里面要用到的参数有:sortConfig sort-change

步骤1:sortConfig参数需要一开始mounted函数中就指定要排序的字段及方向

在这里插入图片描述
比如:我这边的要求是:将排序的内容缓存到本地,然后一进到这个页面就要显示上一次排序的效果。本次更改排序后再次缓存,一次循环。

所以在页面一开始mounted时,我就要取缓存的内容,并处理后放置到sortConfig

mounted(){let sort = localStorage.getItem('sort_arr');if (sort != undefined) {this.sort_arr = JSON.parse(sort);this.queryFrom.OrderBy = JSON.parse(sort).toString();}let sort_obj = JSON.parse(localStorage.getItem('sort_arr'));let defaultSort = [];if (sort_obj && sort_obj.length > 0) {sort_obj.forEach((item) => {let arr = item.split(' ');defaultSort.push({ field: arr[0], order: arr[1] });});this.sortConfig.defaultSort = defaultSort;}
}

步骤2:监听排序方法sort-change

 // 排序
wipSortChange({ column, field, order, sortBy, sortList }) {console.log(column, field, order, sortBy, sortList);if (sortList.length != 0) {let arr = sortList.map((v) => {return v.field + ' ' + v.order;});localStorage.setItem('sort_arr', JSON.stringify(arr));}let sort = localStorage.getItem('sort_arr');if (sort != undefined) {this.queryFrom.OrderBy = JSON.parse(sort).toString();}this.card_list_api();//这个是请求列表数据的接口
},

完成!!!

我看之前同事写的的代码:在切换分页的时候用到了this.$refs.xTable1.clearAll(),这个方法直接将排序的结果都清除了。这样是不对的。

页面选中的值,切换页码的时候没有回显的问题

可以在切换页码的时候,通过下面的代码来实现选中的回显:

if (this.selectedRows) {this.selectedRows.forEach((v) => {this.$refs.xTable1.setCheckboxRow(v, true);});
}

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

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

相关文章

Qt实战:专栏内容介绍及目录

1、专栏介绍 Qt相比Visual Studio (VS) 的优势主要体现在跨平台能力、‌丰富的功能、‌高性能、‌现代UI设计、‌社区支持和企业支持等方面。‌ 跨平台能力&#xff1a;‌Qt 允许应用程序在多个操作系统上编译和运行&#xff0c;‌无需为每个平台编写特定的代码&#xff0c;‌…

设计模式第二天|设计模式创建型:工厂模式、抽象工厂模式、单例模式、建造者模式

文章目录 设计模式的分类工厂模式简单工厂定义核心俗话说优点缺点具体实现 工厂模式&#xff08;Spring IOC控制反转&#xff09;定义核心**组成****俗话说****实现思路****具体实现****使用场景** 抽象工厂模式**前提概念****定义****缺点****具体实现** 单例模式**定义****俗…

Django学习第一天(如何创建和运行app)

前置知识&#xff1a; URL组成部分详解&#xff1a; 一个url由以下几部分组成&#xff1a; scheme&#xff1a;//host:port/path/?query-stringxxx#anchor scheme:代表的是访问的协议&#xff0c;一般为http或者ftp等 host&#xff1a;主机名&#xff0c;域名&#xff0c;…

《低代码指南》——Oracle APEX : AI在低代码开发中的创新应用

在低代码开发领域,我们正在目睹人工智能(AI)集成所带来的显著进展。Oracle公司最新推出的APEX 24.1版本,便是这一趋势的明显体现,其集成的AI功能旨在极大提高开发者的生产力,同时简化应用程序的创建过程。 Contents 将变革性的AI整合到低代码平台 将AI技术引入低代码平台…

二、BIO、NIO、直接内存与零拷贝

一、网络通信编程基础 1、Socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层&#xff0c;是一组接口&#xff0c;由操作系统提供&#xff1b; Socket将复杂的TCP/IP协议处理和通信缓存管理都隐藏在接口后面&#xff0c;对用户来说就是使用简单的接口进行网络应用编程…

MySQL定时备份数据,并上传到oss

1.环境准备 1.安装阿里云的ossutil 2.安装mysql 2.编写脚本 脚本内容如下 #!/bin/bash # 数据库的配置信息&#xff0c;根据自己的情况进行填写 db_hostlocalhost db_usernameroot db_passwordroot db_namedb_root # oss 存贮数据的bucket地址 bucket_namerbsy-backup-buck…

SpringBoot:SpringBoot通过注解监测Controller接口

一、前言 在Spring Boot中&#xff0c;度量指标&#xff08;Metrics&#xff09;是监控和诊断应用性能与行为的重要工具。Spring Boot通过集成Micrometer和Spring Boot Actuator&#xff0c;提供了强大的度量指标收集与暴露功能。 二、度量指标 1. Micrometer Micrometer是一…

基于FPGA的以太网设计(2)----以太网的硬件架构(MAC+PHY)

1、概述 以太网的电路架构一般由MAC、PHY、变压器、RJ45和传输介质组成,示意图如下所示: 需要注意的是,上图是一个简化了的模型,它描述的是两台主机之间的直接连接,但在实际应用中基本都是多台主机构成的局域网,它们之间并不直接相连,而是通过交换机Switch来进行…

Linux云计算 |【第一阶段】SERVICES-DAY5

主要内容&#xff1a; 源码编译安装、rsync同步操作、inotify实时同步、数据库服务基础 实操前骤&#xff1a;&#xff08;所需tools.tar.gz与users.sql&#xff09; 1.两台主机设置SELinnx和关闭防火墙 setenforce 0 systemctl stop firewalld.service //停止防火墙 sy…

scss基本语法---嵌套、循环、条件(@for,@if),混入@mixin,继承@extend,导入@import,

scss是css预编译器&#xff0c;可以简化css代码的书写&#xff0c;并可以编译成css文件使用&#xff1b; 有关scss的安装使用可以参考&#xff1a;Sass语法---sass的安装和引用_引入sass-CSDN博客 嵌套、循环、条件&#xff08;for,if&#xff09; 嵌套 scss支持选择器的嵌套…

rk3568 OpenHarmony4.1 Launcher定制开发—桌面壁纸替换

Launcher 作为系统人机交互的首要入口&#xff0c;提供应用图标的显示、点击启动、卸载应用&#xff0c;并提供桌面布局设置以及最近任务管理等功能。本文将介绍如何使用Deveco Studio进行单独launcher定制开发、然后编译并下载到开发板&#xff0c;以通过Launcher修改桌面背景…

python一维表转二维表

一维表转二维表 import pandas as pd # 读取数据 product_df pd.read_csv(rD:\excelFile\practice\物品属性值一维表.csv,encodingutf-8) # print(product_df)# 将一维表转变二维 s pd.Series(list(product_df[属性值]),index[product_df[物品编号],product_df[属性名]]) …

TQSDRPI开发板教程:实现PL端的UDP回环与GPSDO

本教程将完成一个全面的UDP运行流程与GPSDO测试&#xff0c;从下载项目的源代码开始&#xff0c;通过编译过程&#xff0c;最终将项目部署到目标板卡上运行演示。此外&#xff0c;我们还介绍如何修改板卡的IP地址&#xff0c;以便更好地适应您的网络环境或项目需求。 首先从Gi…

使用nginx实现一个端口和ip访问多个vue前端

前言&#xff1a;由于安全组要求&#xff0c;前端页面只开放一个端口&#xff0c;但是项目有多个前端&#xff0c;此前一直使用的是一个前端使用单独一个端口进行访问&#xff0c;现在需要调整。 需要实现&#xff1a;这里以80端口为例&#xff0c;两个前端分别是&#xff1a;p…

Zabbix监控系统:zabbix服务部署+基于Proxy分布式部署+zabbix主动与被动监控模式

一、Zabbix概述 1.1 简介 zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix 能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff0c;提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 zabbix…

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(三)基变换与坐标变换;微分方程;李群和李代数;雅可比矩阵

一、基变换与坐标变换 字小,事不小。 因为第一反应:坐标咋变,坐标轴就咋变呀。事实却与我们想象的相反。这俩互为逆矩阵。 第一次读没有读明白,后面到事上才明白。 起因是多传感器标定:多传感器,就代表了多个坐标系,多个基底。激光雷达和imu标定。这个标定程序,网上,…

【VSCode】安装 【ESP-IDF】插件及【ESP32-S3】新建工程和工程配置

一、搭建基础工程 二、基础工程的文件架构解析 三、调试相关工具介绍 1、串口下载2、JTAG 下载与调试 四、工程的文件架构解析 五、基础工程配置 一、搭建基础工程 在 VS Code 中新建 ESP-IDF 基础工程的步骤如下&#xff1a; 1、启动 VS Code 并打开命令面板 按下“Ctrl…

1小时上手Alibaba Sentinel流控安全组件

微服务的雪崩效应 假如我们开发了一套分布式应用系统&#xff0c;前端应用分别向A/H/I/P四个服务发起调用请求&#xff1a; 但随着时间推移&#xff0c;假如服务 I 因为优化问题&#xff0c;导致需要 20 秒才能返回响应&#xff0c;这就必然会导致20秒内该请求线程会一直处于阻…

科研绘图系列:R语言TCGA分组饼图(multiple pie charts)

介绍 在诸如癌症基因组图谱(TCGA)等群体研究项目中,为了有效地表征和比较不同群体的属性分布,科研人员广泛采用饼图作为数据可视化的工具。饼图通过将一个完整的圆形划分为若干个扇形区域,每个扇形区域的面积大小直接对应其代表的属性在整体中的占比。这种图形化的展示方…

代码审计 | .NET SqlSugar框架注入漏洞

01阅读须知 此文所节选自小报童《.NET 代码审计》专栏&#xff0c;主要内容有涉及的.NET目录和文件操作、SQL注入方向的敏感函数、还有不安全的配置导致的漏洞挖掘思路&#xff0c;对.NET代码审计感兴趣的朋友们可以解锁该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介…