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"监听,表列需设置为sortable“custom”(自定义) <el-table:data"tableData"bordersort-change"sortChange":default-sort"{prop:sortProp,order:sortOrder}&quo…...
一起笨笨的学C ——16链表基础
目录 目录 前言 正文 链表定义: 基本创建链表程序: 链表结点插入: 对角线记忆法: 画图理解法: 链表结点删除: 链表销毁: 后语 前言 链表理解方法分享,愿你的大脑也能建立一个…...
信息学奥赛一本通1917:【01NOIP普及组】装箱问题
1917:【01NOIP普及组】装箱问题 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4178 通过数: 2473 【题目描述】 有一个箱子容量为VV(正整数,0≤V≤200000≤V≤20000),同时有n个物品(0≤n≤300≤n≤30),…...
android user 版本如何手动触发dump
项目需要在android user版本增加手动触发dump方法,用以确认user版本发生dump后系统是重启还是真正发生dump卡机! 本文以qcom平台项目为例描述所做的修改,留下足迹以备后忘。 闲言少叙,开整上干货: 一、修改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 模板引擎。 模板引擎:为了使用户界面和业务数据分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎会生成一个标准的 html 文档…...
动静资源的转发操作
目录 Nginx中的location指令 静态资源的转发 动态资源的转发 注意事项 深入研究 如何在Nginx中实现对特定后缀文件的静态资源进行反向代理? Nginx中location指令的优先级是怎样确定的? 为什么在使用proxy_pass时要区分是否带有斜杠? N…...
Windows系统安全加固方案:快速上手系统加固指南(上)
无论是个人用户、小型企业还是大型机构,都需要采取措施保护其计算机系统免受各种威胁、系统加固常见的应用场景有个人用户、 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深度(dfs)优先遍历&优先搜索 5.2宽度(bfs)优先遍历&优先搜索 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类,我们定义了好几个对象,想要把这些对象存储下来,该怎么办呢 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 百度 点击百度网盘 下载 链接:https://pan.baidu.com/s/1gSLKYuezaZgd8iqrXhk8Kg 提取码:Fly6 2 csdn https://download.csdn.net/download/fencer911/89584687 二、体验初…...
EXCEL 排名(RANK,COUNTIFS)
1.单列排序 需求描述:如有下面表格,需要按笔试成绩整体排名。 解决步骤: 我们使用RANK函数即可实现单列整体排名。 Number 选择第一列。 Ref 选择这一整列(CtrlShift向下箭头、再按F4)。 "确定"即可计算…...
【踩坑系列-JS】iframe中的url参数获取
Author:赵志乾 Date:2024-07-24 Declaration:All Right Reserved!!! 1. 问题描述 系统A的页面中以iframe的方式嵌入了系统B的页面,并需要将A页面url中的参数传递给B页面。 最初的实现方式是&am…...
测试工作中常听到的名词解释 : )
背景 很多名称其实看字面意思都挺抽象的,有时看群里的测试大佬在不停蹦这类术语,感觉很高大上,但其实很多你应该是知道的,只不过没想到别人是这样叫它的。又或者你的主编程语言不是 Java,所以看不懂他们在讲啥&#x…...
Linux内网离线用rsync和inotify-tools实现文件夹文件单向同步和双向同步
lsyncd实现方式可参考:https://www.jianshu.com/p/c075ccf89516 安装文件下载:相关文件下载 rsync默认都有,所以没有提供。 服务端和客户端均操作 服务端:双向同步其实都是服务端,只是单向同步时稍有区别 客户端&am…...
Spring Security学习笔记(二)Spring Security认证和鉴权
前言:本系列博客基于Spring Boot 2.6.x依赖的Spring Security5.6.x版本 上一篇博客介绍了Spring Security的整体架构,本篇博客要讲的是Spring Security的认证和鉴权两个重要的机制。 UsernamePasswordAuthenticationFilter和BasicAuthenticationFilter是…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
实战设计模式之模板方法模式
概述 模板方法模式定义了一个操作中的算法骨架,并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下,重新定义算法中的某些步骤。简单来说,就是在一个方法中定义了要执行的步骤顺序或算法框架,但允许子类…...
前端高频面试题2:浏览器/计算机网络
本专栏相关链接 前端高频面试题1:HTML/CSS 前端高频面试题2:浏览器/计算机网络 前端高频面试题3:JavaScript 1.什么是强缓存、协商缓存? 强缓存: 当浏览器请求资源时,首先检查本地缓存是否命中。如果命…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...
CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14
什么是 Pattern Matching(模式匹配) ❝ 模式匹配就是一种“描述式”的写法,不需要你手动判断、提取数据,而是直接描述你希望的数据结构是什么样子,系统自动判断并提取。❞ 你给的定义拆解: ✴ Instead of …...
react-pdf(pdfjs-dist)如何兼容老浏览器(chrome 49)
之前都是使用react-pdf来渲染pdf文件,这次有个需求是要兼容xp环境,xp上chrome最高支持到49,虽然说iframe或者embed都可以实现预览pdf,但为了后续的定制化需求,还是需要使用js库来渲染。 chrome 49测试环境 能用的测试…...
