vxe-table——实现切换页码时排序状态的回显问题(ant-design+elementUi中table排序不同时回显的bug)——js技能提升
之前写的后台管理系统,都是用的antd
+element
,table
组件中的【排序】问题是有一定的缺陷的。
想要实现的效果:
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);});
}
相关文章:

vxe-table——实现切换页码时排序状态的回显问题(ant-design+elementUi中table排序不同时回显的bug)——js技能提升
之前写的后台管理系统,都是用的antdelement,table组件中的【排序】问题是有一定的缺陷的。 想要实现的效果: antv——table组件一次只支持一个参数的排序 如下图: 就算是可以自行将排序字段拼接到列表接口的入参中,…...

SQL
SQL全称 Structured Query Language,结构化查询语言。操作关系型数据库的编程语言,定义了一套操作关系型数据库统一标准 。 SQL通用语法 SQL语句可以单行或多行书写,以分号结尾。SQL语句可以使用空格/缩进来增强语句的可读性。MySQL数据库的…...

maven archetype
1.简介 maven脚手架是为了创建一个项目模板,以后新建项目都能够复用该模板 maven中模板引擎使用的是velocity,在文件中可以使用它的语法获取变量等操作 2.实现 单模块脚手架实现 pom.xml <?xml version"1.0" encoding"UTF-8"?> &…...

浏览器打开抽奖系统html
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>在线抽奖 随机选取 自动挑选</title> <script src"https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> body {…...
微信小程序-使用Component方法代替Page方法构造页面
一.使用Component方法的前提条件 在小程序js文件里使用Component方法代替Page方法需要在json文件里面定义usingComponents属性 {"usingComponents": {} }二.注意事项 1.在page页面里使用的钩子函数和事件监听方法都需要写在methods对象里面 methods:{update(){thi…...
Spark SQL----DISTRIBUTE BY子句
Spark SQL----DISTRIBUTE BY子句 一、描述二、语法三、参数四、例子 一、描述 DISTRIBUTE BY子句用于根据输入表达式对数据进行重新分区。与CLUSTER BY子句不同,这不会对每个分区内的数据进行排序。 二、语法 DISTRIBUTE BY { expression [ , ... ] }三、参数 e…...

HTML5-canvas1
1、canvas:创建画布 <canvas id"canvas"></canvas>2、画一条直线 var canvasdocument.getElementById(cancas); canvas.width800; canvas.height800; var contextcanvas.getContext(2d); //获得2d绘图上下文环境 //画一条直线 c…...

【NOI-题解】1009 - 数组逆序1162 - 数组元素的删除1211 - 数组元素的插入1161. 元素插入有序数组1159. 数组元素的移动
文章目录 一、前言二、问题问题:1009 - 数组逆序问题:1162 - 数组元素的删除问题:1211 - 数组元素的插入问题:1161. 元素插入有序数组问题:1159. 数组元素的移动 三、感谢 一、前言 本章节主要对数组问题中数组元素移…...
新电脑如何设置 npm 源及查看源、安装 cnpm、pnpm 和 yarn 的详细教程
当你获得一台新电脑,或需要在现有电脑上优化 JavaScript 和 Node.js 的开发环境时,正确配置 npm 是一步不可少的过程。本教程将详细指导你如何设置 npm 源,查看当前源,以及如何安装 cnpm、pnpm 和 yarn。 1. 设置 npm 源 npm (N…...

完全移动huggingface模型仓库(不是简单mv)
Linux中移动huggingface模型仓库 参考链接 先在bashrc中配置: export HF_DATASETS_CACHE"/your/path/dataset" export HF_HOME"/your/path/" export HUGGINGFACE_HUB_CACHE"/your/path/hub" export TRANSFORMERS_CACHE"/your…...

手机空号过滤批量查询的意义及方法
手机空号过滤批量查询是现代营销和通信管理中常用的技术手段,旨在通过批量处理手机号码,筛选出活跃号码和空号等无效号码,以提高营销效率和减少不必要的通信成本。以下是关于手机空号过滤批量查询的详细解答: 一、手机空号过滤批…...

Dockerfile制作部署wordpress-6.6
目录 一. 环境准备 二. 准备对应的配置文件 三. 编写Dockerfile 四. 构建镜像 五. 配置MySQL 六. 安装wordpress 七. 扩展 一. 环境准备 localhost192.168.226.25 rocky_linux9.4 Docker version 27.0.3 关闭防火墙和selinux,进行时间同步。 安装docker…...

项目的纪要
ai客服项目中发现的问题: 可以在控制台看到我们存储的cookie: 可以看到是这样的, 但是我们通过getCookie方法专门获取这个字段, 然后在控制台打印后 const userName getCookie(SA_USER_NICK_NAME); console.log(userName, userName); 输出结果是: 然后我们尝试通过de…...

ubuntu 更新源
前言 实现一键替换在线源 一键更新源 ubuntu 全球镜像站以下支持现有ubuntu 20,22,24 echo "Delete the default source" rm -rf /etc/apt/sources.listecho "Build a new source" cat <<EOF>>/etc/apt/sources.li…...
XGBoost、RF随机森林算法MATLAB实现
% 加载并预处理训练数据 opts1 = detectImportOptions(附件一AE.xlsx, PreserveVariableNames, true); train_data = readtable(附件一AE.xlsx, opts1); train_data.Time = datetime(train_data.time, InputFormat, yyyy-MM-dd HH:mm:ss); % 特征提取和标签准备 windowSize…...
WPF 解决: DataGrid 已定义列,但是还是会显示模型的所有属性的问题
AutoGenerateColumns 属性 AutoGenerateColumns:这个属性决定 DataGrid 是否根据数据源中的属性自动生成列。如果设置为 true,DataGrid 会根据数据源中的属性自动生成列。如果设置为 false,则 DataGrid 不会自动生成列,开发者需要…...
【ai】Easy-RAG : ImportError: cannot import name ‘BaseModel‘ from ‘pydantic‘
[Bug]: cannot import name ‘RootModel’ from ‘pydantic’ #1237 版本不匹配导致 ImportError: cannot import name ‘BaseModel’ from ‘pydantic’ /home/zhangbin/miniconda3/envs/Easy-RAG/bin/python /home/zhangbin/proj/06_rag/02_Easy-RAG/webui.py /home/zhangbi…...
WebKit简介
WebKit是一个开源的浏览器引擎,最初由苹果公司开发,用于Safari浏览器。它是基于KDE项目的KHTML引擎进行开发,并在改进和扩展中形成了WebKit引擎。 WebKit的工作流程可以分为以下几个步骤: 1.解析HTML:当浏览器加载一个…...

笔记 | Python环境下的GUI编程常用包
前言 Python的使用频率和范围越来越大,在一些开发工作中由于需要可视化的图形界面,常常需要进行图形用户界面(Graphic User Interface, GUI)开发。例如,目前最火热的大模型应用,常常是以一个网页界面进行操…...

mysql 数据库空间统计sql
mysql 数据库空间统计 文章目录 mysql 数据库空间统计说明一、数据库存储代码二、查询某个数据库的所有表的 代码总结 说明 INFORMATION_SCHEMA Table Reference 表参考 information_schema是MySQL中的一个特殊数据库,它存储了关于所有其他数据库的元数据信息。…...

SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...