当前位置: 首页 > news >正文

Vue el-table的自定义排序返回值为null,设置刷新页面保持排序标志,导航时elementui组件不更新

自定义排序使用@sort-change="sortChange"监听,表列需设置为sortable=“custom”(自定义)

<el-table:data="tableData"border@sort-change="sortChange":default-sort="{prop:sortProp,order:sortOrder}"style="width: 100%":key="tableKey+'table'">......<el-table-columnprop="date"label="日期"sortable="custom"width="150"></el-table-column>......
  • 排序事件传入参数格式为: {column: {…}, prop: 'commentnum', order: 'descending'},观察发现第一列排序时obj.order有‘descending’、‘ascending’、null三个值,有文章提到设置:sort-orders="['ascending', 'descending']",但此官方说明只支持sortable为true情况(默认表格排序)。所以我们需手动设置当obj.order为null情况。参考文章
sortChange(obj){//{column: {…}, prop: 'commentnum', order: 'descending'}//{column: {…}, prop: 'commentnum', order: 'ascending'}// console.log(obj);this.sortProp=obj.prop;if (obj.order === null) {this.sortOrder === 'descending' ? obj.order = 'ascending' : obj.order = 'descending';obj.column.order = obj.order;}this.sortOrder=obj.order;//路由跳转this.$router.push({path: "/doBlog",query: { cp: 1 ,sortProp:this.sortProp,sortOrder:this.sortOrder,time:Date.now()},});	},
  • 刷新页面时要保持对应列的排序标志可设置:default-sort="{prop:sortProp,order:sortOrder}",刷新页面获取路由值即可。
  • 但如果是用导航栏切换页面,表头的排序标志依旧不更新,所以改变table的:key="tableKey+'table'"就能保证更新了。(适用于elementui其他组件)
update(){this.currentPage=this.$route.query.cp?parseInt(this.$route.query.cp,10):1;this.sortProp=this.$route.query.sortProp?this.$route.query.sortProp:"id";this.sortOrder=this.$route.query.sortOrder?this.$route.query.sortOrder:"ascending";this.pageKey++;//强制更新分页组件this.tableKey++;//强制更新el-table排序标志//获取数据//。。。ajax}

在下面函数中调用刷新方法:

	watch:{$route(){this.update();}},mounted() {this.update();	}	

解决了3个问题:1、自定义排序返回值为null;2、设置刷新页面保持排序标志;3、导航时elementui组件不更新

相关文章:

Vue el-table的自定义排序返回值为null,设置刷新页面保持排序标志,导航时elementui组件不更新

自定义排序使用sort-change"sortChange"监听&#xff0c;表列需设置为sortable“custom”&#xff08;自定义&#xff09; <el-table:data"tableData"bordersort-change"sortChange":default-sort"{prop:sortProp,order:sortOrder}&quo…...

一起笨笨的学C ——16链表基础

目录 目录 前言 正文 链表定义&#xff1a; 基本创建链表程序&#xff1a; 链表结点插入&#xff1a; 对角线记忆法&#xff1a; 画图理解法&#xff1a; 链表结点删除&#xff1a; 链表销毁&#xff1a; 后语 前言 链表理解方法分享&#xff0c;愿你的大脑也能建立一个…...

信息学奥赛一本通1917:【01NOIP普及组】装箱问题

1917&#xff1a;【01NOIP普及组】装箱问题 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4178 通过数: 2473 【题目描述】 有一个箱子容量为VV(正整数&#xff0c;0≤V≤200000≤V≤20000&#xff09;&#xff0c;同时有n个物品&#xff08;0≤n≤300≤n≤30),…...

android user 版本如何手动触发dump

项目需要在android user版本增加手动触发dump方法&#xff0c;用以确认user版本发生dump后系统是重启还是真正发生dump卡机&#xff01; 本文以qcom平台项目为例描述所做的修改&#xff0c;留下足迹以备后忘。 闲言少叙&#xff0c;开整上干货&#xff1a; 一、修改bin文件 …...

RedHat Linux 7.5 安装 mssql-server

RedHat Linux 7.5 安装 mssql-server 1、安装部署所需的依赖包 [rootlocalhost ~]# yum -y install libatomic bzip2 gdb cyrus-sasl cyrus-sasl-gssapi Loaded plugins: ulninfo Resolving Dependencies --> Running transaction check ---> Package bzip2.x86_64 0:1…...

Vue的SSR和预渲染:提升首屏加载速度与SEO效果

引言 在现代Web应用开发中,首屏加载速度和搜索引擎优化(SEO)是衡量应用性能的重要指标。Vue.js 作为流行的前端框架,提供了服务器端渲染(SSR)和预渲染(prerendering)两种技术来提升这些指标。本文将深入探讨如何使用 Vue 的 SSR 和预渲染技术,提供详细的代码示例和最…...

若依ruoyi+AI项目二次开发(智能售货机运营管理系统)

(一) 帝可得 - 产品原型 - 腾讯 CoDesign (qq.com)...

【SpringBoot】 4 Thymeleaf

官网 https://www.thymeleaf.org/ 介绍 Thymeleaf 是一个适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 模板引擎&#xff1a;为了使用户界面和业务数据分离而产生的&#xff0c;它可以生成特定格式的文档&#xff0c;用于网站的模板引擎会生成一个标准的 html 文档…...

动静资源的转发操作

目录 Nginx中的location指令 静态资源的转发 动态资源的转发 注意事项 深入研究 如何在Nginx中实现对特定后缀文件的静态资源进行反向代理&#xff1f; Nginx中location指令的优先级是怎样确定的&#xff1f; 为什么在使用proxy_pass时要区分是否带有斜杠&#xff1f; N…...

Windows系统安全加固方案:快速上手系统加固指南(上)

无论是个人用户、小型企业还是大型机构&#xff0c;都需要采取措施保护其计算机系统免受各种威胁、系统加固常见的应用场景有个人用户、 AWD 比赛、公共机构以及企业环境等等 文档目录 一、Windows常用命令二、Windows常见端口三、账户安全3.1 默认账户安全3.2 按照用户分配账户…...

git连接远程仓库

一、本地新建代码,上传到远程仓库 1.git init #初始化本地仓库 2.git remote -v #查看当前仓库的远程地址 3.git remote add origin 远程仓库的URL 4.git branch master / git branch dev 创建 主分支或者 dev 分支 5.git checkout master/dev. 切换到主分支或者dev 分支…...

算法-----递归~~搜索~~回溯(宏观认识)

目录 1.什么是递归 1.1二叉树的遍历 1.2快速排序 1.3归并排序 2.为什么会用到递归 3.如何理解递归 4.如何写好一个递归 5.什么是搜索 5.1深度&#xff08;dfs&#xff09;优先遍历&优先搜索 5.2宽度&#xff08;bfs&#xff09;优先遍历&优先搜索 6.回溯 1.什…...

【云原生】Docker搭建知识库文档协作平台Confluence

目录 一、前言 二、企业级知识库文档工具部署形式 2.1 开源工具平台 2.1.1 开源工具优点 2.1.2 开源工具缺点 2.2 私有化部署 2.3 混合部署 三、如何选择合适的知识库平台工具 3.1 明确目标和需求 3.2 选择合适的知识库平台工具 四、Confluence介绍 4.2 confluence特…...

序列化与反序列化的本质

1. 将对象存储到本地 假如有一个student类&#xff0c;我们定义了好几个对象&#xff0c;想要把这些对象存储下来&#xff0c;该怎么办呢 from typing import List class Student:name: strage: intphones: List[str] s1 Student("xiaoming",10,["huawei&quo…...

飞牛爬虫FlyBullSpider 一款简单方便强大的爬虫,限时免费 特别适合小白!用它爬下Boss的2024年7月底Java岗位,分析一下程序员就业市场行情

一、下载安装FlyBullSpider 暂时支持Window,现在只在Win11上做过测试 1 百度 点击百度网盘 下载 链接&#xff1a;https://pan.baidu.com/s/1gSLKYuezaZgd8iqrXhk8Kg 提取码&#xff1a;Fly6 2 csdn https://download.csdn.net/download/fencer911/89584687 二、体验初…...

EXCEL 排名(RANK,COUNTIFS)

1.单列排序 需求描述&#xff1a;如有下面表格&#xff0c;需要按笔试成绩整体排名。 解决步骤&#xff1a; 我们使用RANK函数即可实现单列整体排名。 Number 选择第一列。 Ref 选择这一整列&#xff08;CtrlShift向下箭头、再按F4&#xff09;。 "确定"即可计算…...

【踩坑系列-JS】iframe中的url参数获取

Author&#xff1a;赵志乾 Date&#xff1a;2024-07-24 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 问题描述 系统A的页面中以iframe的方式嵌入了系统B的页面&#xff0c;并需要将A页面url中的参数传递给B页面。 最初的实现方式是&am…...

测试工作中常听到的名词解释 : )

背景 很多名称其实看字面意思都挺抽象的&#xff0c;有时看群里的测试大佬在不停蹦这类术语&#xff0c;感觉很高大上&#xff0c;但其实很多你应该是知道的&#xff0c;只不过没想到别人是这样叫它的。又或者你的主编程语言不是 Java&#xff0c;所以看不懂他们在讲啥&#x…...

Linux内网离线用rsync和inotify-tools实现文件夹文件单向同步和双向同步

lsyncd实现方式可参考&#xff1a;https://www.jianshu.com/p/c075ccf89516 安装文件下载&#xff1a;相关文件下载 rsync默认都有&#xff0c;所以没有提供。 服务端和客户端均操作 服务端&#xff1a;双向同步其实都是服务端&#xff0c;只是单向同步时稍有区别 客户端&am…...

Spring Security学习笔记(二)Spring Security认证和鉴权

前言&#xff1a;本系列博客基于Spring Boot 2.6.x依赖的Spring Security5.6.x版本 上一篇博客介绍了Spring Security的整体架构&#xff0c;本篇博客要讲的是Spring Security的认证和鉴权两个重要的机制。 UsernamePasswordAuthenticationFilter和BasicAuthenticationFilter是…...

Java——文件和目录操作

文件和目录操作1、构造方法2、文件元数据3、文件操作4、目录操作1、构造方法 File既可以表示文件&#xff0c;也可以表示目录&#xff0c;它的主要构造方法有&#xff1a; //pathname表示完整路径&#xff0c;该路径可以是相对路径&#xff0c;也可以是绝对路径 public File(…...

Go语言树结构:二叉树与AVL树

Go语言树结构&#xff1a;二叉树与AVL树 1. 二叉树实现 type TreeNode struct {Val intLeft *TreeNodeRight *TreeNode }type BinaryTree struct {Root *TreeNode }func (t *BinaryTree) Insert(val int) {t.Root insert(t.Root, val) }func insert(node *TreeNode, val in…...

从PDCA到DevOps:构建可落地的持续改进框架与实践指南

1. 项目概述&#xff1a;一个关于持续改进的实践框架在软件工程、产品研发乃至个人成长的领域里&#xff0c;“持续改进”这个词我们听得耳朵都快起茧子了。几乎每个团队都在提敏捷、提DevOps、提精益&#xff0c;其核心思想都绕不开“持续改进”这四个字。但说实话&#xff0c…...

Vue.js数据同步利器:vsync库的核心原理与工程实践

1. 项目概述&#xff1a;一个基于Vue.js的现代化同步解决方案最近在梳理前端状态管理和数据同步的实践时&#xff0c;我遇到了一个挺有意思的开源项目&#xff1a;Hardik455abc/vsync。乍一看这个标题&#xff0c;vsync很容易让人联想到计算机图形学里的“垂直同步”&#xff0…...

基于 HarmonyOS 6.0 的智能记账页面开发实践:ArkUI 页面构建与跨端设计深度解析

基于 HarmonyOS 6.0 的智能记账页面开发实践&#xff1a;ArkUI 页面构建与跨端设计深度解析 前言 随着 HarmonyOS 6.0 的持续演进&#xff0c;鸿蒙生态已经不再局限于传统移动端开发&#xff0c;而是逐渐形成覆盖手机、平板、智慧屏、车机以及 IoT 设备的全场景开发体系。相比传…...

自托管代码仓库聚合分析平台CodeStacker:架构设计与部署指南

1. 项目概述&#xff1a;一个为开发者打造的代码仓库聚合与智能分析工具如果你和我一样&#xff0c;每天需要面对GitHub、GitLab、Bitbucket等不同平台上的几十个甚至上百个代码仓库&#xff0c;那么“仓库管理”这件事本身&#xff0c;可能就已经消耗了你大量的精力。哪个项目…...

实测Taotoken多模型聚合服务的延迟与稳定性观感分享

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 实测Taotoken多模型聚合服务的延迟与稳定性观感分享 作为需要频繁调用大模型API的开发者&#xff0c;服务的稳定性和可预测性是影响…...

WESTINGHOUSE 4D33900G19电源模块

WESTINGHOUSE 4D33900G19 电源模块产品特点4D33900G19 是西屋电气&#xff08;WESTINGHOUSE&#xff09;工业控制系统中的一款电源模块&#xff0c;为系统提供稳定可靠的电源供应。4D33900G19 采用高可靠性工业级设计&#xff0c;适用于连续运行的严苛工业环境。支持宽范围交流…...

Cesium 体积光阴影率分析和阴影体渲染效果

Cesium 体积光阴影率分析和阴影体渲染效果 在传统的 GIS 日照分析中&#xff0c;当分析对象扩展到高层建筑时&#xff0c;阴影在空中随着时间推移形成的“三维空间漏斗”才是数据的全貌。 为了在前端实现这种影视级的三维体积阴影分析&#xff08;Volumetric Shadow Analysis…...

USB IP设计演进与FinFET工艺挑战解析

1. USB IP设计的技术演进背景USB&#xff08;通用串行总线&#xff09;从1996年首次发布至今&#xff0c;已成为现代电子设备不可或缺的核心接口标准。作为一位从事芯片设计15年的工程师&#xff0c;我亲眼见证了USB IP从最初的简单外设连接到如今支持10Gbps高速传输的完整技术…...