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组件不更新

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

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

相关文章

网络安全等级保护制度1.0与2.0的演进与变革

等保1.0概述 等保1.0是我国在网络安全领域迈出的重要一步&#xff0c;它于2008年正式发布。该版本的等保制度以《信息安全技术 信息系统安全等级保护基本要求》为核心标准&#xff0c;主要聚焦于信息系统的物理安全、网络安全、主机安全、应用安全和数据安全等方面的基础防护。…

【设计模式——学习笔记】模板方法模式

介绍 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;并允许子类在不改变算法结构的情况下重新定义算法的某些步骤。这种模式的主要目的是通过将不变的行为放在父类中&#xff0c;而将可变的行…

新版本异次元荔枝V4自动发卡系统源码

新版本异次元荔枝V4自动发卡系统源码&#xff0c;增加主站货源系统&#xff0c;支持分站自定义支付接口&#xff0c;目前插件大部分免费&#xff0c;UI页面全面更新&#xff0c;分站可支持对接其他分站产品&#xff0c;分站客服可自定义&#xff0c;支持限定优惠。 源码下载&a…

HTML(六)——HTML表单和框架

HTML 表单 HTML 表单用于收集用户的输入信息&#xff0c;是一个包含表单元素的区域 HTML 表单表示文档中的一个区域&#xff0c;此区域包含交互控件&#xff0c;将用户收集到的信息发送到 Web 服务器。 HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。 …

SpringBoot整合Spring Boot Admin实现监控

目录 基本操作流程&#xff1a; 服务端 server 0.创建一个springboot项目 1.导入依赖 2.添加配置信息 3.在启动类添加注解 4.运行 客户端client 1.添加依赖 2.添加配置信息 3.运行 基本操作流程&#xff1a; 服务端 server 0.创建一个springboot项目 1.导入依赖 …

杰发科技Bootloader(1)—— Keil配置地址

IAP方式 BootLoader方式 UDSBoot方式 AC7801的地址分配 用户空间的的地址从8000000开始分配&#xff0c;大小是64页&#xff0c;即128K。 RAM地址从20000000开始 基于UDSboot调试-Boot 烧录Boot之后&#xff0c;ATClinkTool无法连接 用keil查看内存&#xff0c;地址到8005388…

前端在浏览器总报错,且获取请求头中token的值为null

前端请求总是失败说受跨域请求影响&#xff0c;但前后端配置已经没有问题了&#xff0c;如下&#xff1a; package com.example.shop_manage_sys.config;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Conf…

算法学习2——排序算法(2)

上一篇介绍了几种常见且使用较多的排序算法&#xff0c;本章主要是一个进阶内容&#xff0c;介绍三个较为复杂的算法。 计数排序 (Counting Sort) 计数排序是一种适用于范围较小的整数序列的排序算法。它通过统计每个元素的出现次数&#xff0c;然后依次输出元素&#xff0c;…

JVM 21 的优化指南:如何进行JVM调优,JVM调优参数有哪些

这篇文章将详细介绍如何进行JVM 21调优&#xff0c;包括JVM 21调优参数及其应用。此外&#xff0c;我将提供12个实用的代码示例&#xff0c;每个示例都会结合JVM启动参数和Java代码。 本文已收录于&#xff0c;我的技术网站 java-broke.site&#xff0c;有大厂完整面经&#x…

【数据结构】详解二叉树及其操作

无论你觉得自己多么的了不起&#xff0c;也永远有人比你更强。&#x1f493;&#x1f493;&#x1f493; 目录 ✨说在前面 &#x1f34b;知识点一&#xff1a;二叉树的遍历 • &#x1f330;1.创建一棵二叉树 • &#x1f330;2.二叉树的遍历 •&#x1f525;前序遍历 •&a…

提升自身的国际影响力-香港服务器托管的优势

随着全球化的不断深入&#xff0c;中国企业正以前所未有的速度走向世界舞台&#xff0c;不仅在全球市场上展现其竞争力&#xff0c;更在寻求通过技术创新和服务优化来提升自身的国际影响力。在这一过程中&#xff0c;服务器的选择与托管成为了一个至关重要的环节。特别是在香港…

基于SpringBoot实现验证码功能

目录 一 实现思路 二 代码实现 三 代码汇总 现在的登录都需要输入验证码用来检测是否是真人登录&#xff0c;所以验证码功能在现在是非常普遍的&#xff0c;那么接下来我们就基于springboot来实现验证码功能。 一 实现思路 今天我们介绍的是两种主流的验证码&#xff0c;一…

使用php adodb5连接人大金仓数据库

打开php中的pgsql扩展 extensionpgsql使用adodb5连接kingbase数据库 <?php include("adodb5/adodb.inc.php"); $fox_dbtype pgsql; $fox_host 192.168.1.66; $fox_user system; $fox_pwd 123456; $fox_dbname testkingbase; $fox_port 54321;$dbNewADOCo…

级联目标检测 vs 单阶段检测:深度学习中的猫鼠游戏

级联目标检测 vs 单阶段检测&#xff1a;深度学习中的猫鼠游戏 目标检测是计算机视觉领域的一个核心问题&#xff0c;其目的是在图像中识别和定位一个或多个目标。随着深度学习技术的发展&#xff0c;目标检测方法经历了从传统算法到基于深度学习的方法的转变。目前&#xff0…

【JavaScript】对象属性

JS 对象的可枚举性指的是对象的某些属性是否可以被 JSON.stringify()、 for…in 循环、Object.keys()、Object.values() 和 Object.entries() ⽅法枚举到。 每个对象属性都有⼀个名字和一个属性描述符&#xff0c;这个属性描述符⾥⾯包括了该属性的许多特性&#xff0c;如可枚…

大数据技术--实验01-Hadoop的安装与使用【实测可行】

使用下面表中的软件版本进行配置&#xff1a; 准备好后&#xff0c;按照下面的步骤进行配置。 配置VMware网络 在VMWare主界面&#xff0c;点击“编辑”>“虚拟网络编辑”菜单进入虚拟网卡参数设置界面。选择VMnet8条目&#xff0c;点击“NAT设置”按钮后可以看到我们的VM…

学习unity官方的网络插件Netcode【一】

对bool值的个人理解&#xff1a; IsOwner&#xff1a;本地网络对象 IsLocalPlayer&#xff1a;本地网络玩家&#xff0c;&#xff08;本地网络玩家也是本地网络对象&#xff09; using Unity.Netcode; using UnityEngine; //个人理解&#xff1a;通过Rpc完成了一次客户端给服务…

【React Hooks原理 - createContext、useContext】

概述 在前面React Hooks系列介绍中我们知道React为了更好的处理不同生命周期的特殊处理&#xff0c;除了useContext这个Hooks之外的其他Hooks都拆为了Mount、Update两个阶段&#xff0c;而useContext内部并没有区分都是通过调用readContext来获取上下文的&#xff0c;下面就来…

微信小程序删除滑块 SwiperCell 自动收起 Van weapp van-swipe-cell 滑块自动收起 点击页面也自动收起滑块

在当前页面整个 view 中 给页面绑定 点击事件bindtap"onSwipeCellPage"给 van-swipe-cell 组件设置 id &#xff08;for循环可以添加 id"swip-cell-{{item.id}}" &#xff09;van-swipe-cell 组件 添加属性 当用户打开滑块时触发 bind:open"swiperCel…

Ajax原理-XMLHttpRequest、Promise以及封装简易的axios函数

这里写目录标题 一级目录二级目录三级目录 一、Ajax原理-XMLHttpRequest对象1.步骤 二、XMLHttpRequest-查询参数1.定义2.语法 二、XMLHttpRequest-数据提交1.需求2.核心 三、Promise1.定义2.好处3.三种状态 四、封装简易的axios1.需求&#xff1a;2.封装axios函数获取数据3.封…