elementUI——el-table自带排序使用问题

问题
排序表格默认第一列按降序排(状态1),当点击其他列后(状态2),改变日期,触发表格数据更新,发现列的排序还点亮在之前的操作上,没有按照默认来(回到状态1)。
在这里插入图片描述

在table-header.js中,针对defaultSort的处理源码如下:

  mounted() {// nextTick 是有必要的 https://github.com/ElemeFE/element/pull/11311this.$nextTick(() => {const { prop, order } = this.defaultSort;const init = true;this.store.commit('sort', { prop, order, init });});}

源码中没有监听default-sort的变化,导致外面数据变更,但表格还是之前的排序操作按钮点亮

解决办法
在我们自己的代码中,手动执行这个代码即可

// 初始默认code列降序排this.defaultSort = {prop: 'code',order: 'descending',
}
// el-table 需要手动触发排序
this.handleSortChange(this.defaultSort)// 修改默认点亮按钮
this.$nextTick(() => {this.$refs.refTable?.store.commit('sort', { ...this.defaultSort, init: true });
});

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

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

相关文章

Rokid Jungle--Max pro

介绍和功能开发 YodaOS-Master操作系统:以交换计算为核心,实现单目SLAM空间交互,具有高精度、实时性和稳定性。发布UXR2.0SDK,为构建空间内容提供丰富的开发套件 多模态交互 算法原子化 多种开发工具协同 多生态支持 骁龙XR2…

【C++精华铺】10.STL string模拟实现

1. 序言 STL(标准模板库)是一个C标准库,其中包括一些通用的算法、容器和函数对象。STL的容器是C STL库的重要组成部分,它们提供了一种方便的方式来管理同类型的对象。其中,STLstring是一种常用的字符串类型。 STLstrin…

既然有 HTTP 协议,为什么还要有 RPC

HTTP和RPC 什么是HTTP HTTP协议(Hyper Text Transfer Protocol),又叫做超文本传输协议。平时上网在浏览器上敲个网址就能访问网页,这里用到的就是HTTP协议。 什么是RPC RPC(Remote Procedure Call)&…

VLAN间路由:单臂路由与三层交换

文章目录 一、定义二、实现方式单臂路由三层交换 三、单臂路由与三层路由优缺点对比四、常用命令 首先可以看下思维导图,以便更好的理解接下来的内容。 一、定义 VLAN间路由是一种网络配置方法,旨在实现不同虚拟局域网(VLAN)之…

ssprompt:一个LLM Prompt分发管理工具

阅读顺序 🌟前言🔔ssprompt介绍命令介绍Metafile介绍版本依赖规则 🌊 PromptHubGitHub Token 🚀 Quick Install系统依赖pip安装Linux, macOS, Windows (WSL)Windows (Powershell) 🚩 Roadmap🌏 项目交流讨论…

Android手机防沉迷软件的基本原理

(现在手机游戏、短视频等不仅对小孩子负面影响巨大,连很多成年人都沉迷其中难以自拔,影响工作、生活、学习。这已经造成全社会性的巨大影响,长此以往,国将不国。本人仅在此以自己掌握的些许技术略尽绵薄之力,希望能抛砖…

一、了解[mysql]索引底层结构和算法

目录 一、索引1.索引的本质2.mysql的索引结构 二、存储引擎1.MyISAM2.InnoDB3.为什么建议InnoDB表要建立主键并且推荐int类型自增?4.innodb的主键索引和非主键索引(二级索引)区别5.联合索引 一、索引 1.索引的本质 索引:帮助mysql高效获取数…

ClickHouse 存算分离改造:小红书自研云原生数据仓库实践

ClickHouse 作为业界性能最强大的 OLAP 系统,在小红书内部被广泛应用于广告、社区、直播和电商等多个业务领域。然而,原生 ClickHouse 的 MPP 架构在运维成本、弹性扩展和故障恢复方面存在较大局限性。为应对挑战,小红书数据流团队基于开源 C…

Vue + Element UI 前端篇(八):管理应用状态

使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改…

MT9700 80mΩ,可调快速响应限流配电开关芯片

MT9700 80mΩ&#xff0c;可调快速响应限流配电开关芯片 特征 符合USB规范 集成80mΩ电源MOSFET 低电源电流 15μA典型开启状态 1μA典型关闭状态 宽输入电压Range&#xff1a;2.4V到5.5V 快速瞬态响应&#xff1a;<2μs 反向电流流阻塞 热关机保护 热插件应…

JAVA 比较两个区间是否存在交集

最近遇到一个开发问题&#xff0c;判断两个价格的大小&#xff0c;听着很简单&#xff0c;但其实价格是浮动的&#xff0c;也就是说价格是一个范围&#xff0c;比如物品A的价格是5&#xff5e;10&#xff0c;现在我们通过筛选条件&#xff0c;把价格符合在8&#xff5e;20之前的…

2023 年高教社杯全国大学生数学建模竞赛题目 A 题 定日镜场的优化设计

A 题 定日镜场的优化设计 构建以新能源为主体的新型电力系统&#xff0c;是我国实现“碳达峰”“碳中和”目标的一项重要措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。 定日镜是塔式太阳能光热发电站&#xff08;以下简称塔式电站&#xff09;收集太阳能的基…

【力扣周赛】第 357 场周赛(⭐反悔贪心)

文章目录 竞赛链接Q1&#xff1a;6925. 故障键盘解法1——直接模拟解法2——双端队列 Q2&#xff1a;6953. 判断是否能拆分数组&#xff08;贪心&#xff09;Q3&#xff1a;2812. 找出最安全路径⭐解法1——多源BFS瓶颈路模型&#xff1f;解法2——多源BFS 倒序枚举答案 并查…

Java 基于SpringBoot+Vue的社区医院管理系统的实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1、效果演示2、 前言介绍3. 技术栈4系统设计4.1数据库设计4.2系统整体设计4.2.1 系统设计思想4.2.…

Win10如何找回图片查看器

近期有小伙伴反映在将Win10升级之后发现电脑自带的图片查看器没有了&#xff0c;这是怎么回事&#xff0c;该怎么找回呢&#xff0c;下面小编就给大家详细介绍一下Win10找回图片查看器的方法&#xff0c;有需要的小伙伴快来和小编一起阅读看看吧。 win10找回windows照片查看器…

降噪音频转录 Krisp: v1.40.7 Crack

主打人工智能降噪服务的初创公司「Krisp」近期宣布推出音频转录功能&#xff0c;能对电话和视频会议进行实时设备转录。该软件还整合的ChatGPT&#xff0c;以便快速总结内容&#xff0c;开放测试版于今天上线。 随着线上会议越来越频繁&#xff0c;会议转录已成为团队工作的重…

Python 实现单例模式的五种写法!

单例模式&#xff08;Singleton Pattern&#xff09; 是一种常用的软件设计模式&#xff0c;该模式的主要目的是确保某一个类只有一个实例存在。当你希望在整个系统中&#xff0c;某个类只能出现一个实例时&#xff0c;单例对象就能派上用场。 比如&#xff0c;某个服务器程序的…

数据集学习笔记(六):目标检测和图像分割标注软件介绍和使用,并转换成YOLO系列可使用的数据集格式

文章目录 一、目标检测1.1 labelImg1.2 介绍1.3 安装1.4 使用1.5 转换1.6 验证 二、图像分割2.1 labelme2.2 介绍2.3 安装2.4 使用2.5 转换2.6 验证 一、目标检测 1.1 labelImg 1.2 介绍 labelImg是一个开源的图像标注工具&#xff0c;用于创建图像标注数据集。它提供了一个…

OSI与TCP IP各层的结构与功能,都有哪些协议

分析&回答 OSI七层模型 层功能TCP/IP协议族应用层文件传输&#xff0c;电子邮件&#xff0c;文件服务&#xff0c;虚拟终端TFTP&#xff0c;HTTP&#xff0c;SNMP&#xff0c;FTP&#xff0c;SMTP&#xff0c;DNS&#xff0c;Telnet表示层数据格式化&#xff0c;代码转换…

数学建模--Seaborn库绘图基础的Python实现

目录 1.绘图数据导入 2. sns.scatterplot绘制散点图 3.sns.barplot绘制条形图 4.sns.lineplot绘制线性图 5.sns.heatmap绘制热力图 6.sns.distplot绘制直方图 7.sns.pairplot绘制散图 8.sns.catplot绘制直方图 9.sns.countplot绘制直方图 10.sns.lmplot绘回归图 1.绘图数…