iview的表格更新表头保持排序字段状态、手动重置排序字段状态

news2024/9/23 3:28:24

前提:vue2、view-design 4.7.0

问题:要实现通过切换不同的选项,表格可能新增或删除某几个字段列,除了这几个字段不可排序,其他字段皆可切换排序。实现后发现,重新渲染表头后原本排序的表头字段没有高亮排序图标,导致表格数据接口的排序传参与展示不一致。

解决:手动设置表头字段的排序状态。

需要使用 sortType 参数,iview的表头排序通过sortType判断。可查看iview官网字段说明。具体实现如下:

// 表格字段-columns 排序字段-sortKey 排序方式-sortType
this.columns.forEach((item) => {
    if(item.key === this.sortKey) {
        item.sortType = this.sortType;
    }
})

扩展:新增需求——在某一情形下需手动重置表格的排序。

实现:1. 重置排序相关变量; 2. 给table组件手动设置 key值,重置时改变key值变量。3. 由于之前手动设置了表头数据的sortType,因此在这里需要复原sortType参数。具体实现如下:

this.sortKey = '';
this.sortType = '';
this.columns.forEach((item) => {
    if(item.sortType) {
        item.sortType = '';
    }
})
// 表格key值
this.tableKey += 1;

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

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

相关文章

【C++】VS-code 报错error C2001: 常量中有换行符(已解决,图文分享)

目录 0.环境 1.简介 2.有效的解决办法 3.尝试过但无效的方法 1)在终端设置utf-8语言 2)用Notepad 修改编码 3)在vs-code中,修改编码规则,使用【Reopen with Encoding】 0.环境 windows11 VS-code c 1.简介 一…

使用Teleport实现视频小窗口播放

效果 实现步骤 小视频窗口 <!-- 小视频窗口 --><divid"fixbox"style"width: 300px;height: 300px;position: fixed;right: 20px;bottom: 20px;"></div> 占位元素 <!-- 被监听出入视口的占位元素 --><div id"box"…

token响应

程序拿着帐密到数据库检查&#xff0c;结果为true就证明登录成功&#xff0c;则需要返回token 设置token的返回值&#xff0c;可以直接调用&#xff0c;也会显得很高级 新建类resultToken-将定义属性冰将之前定义的data改为token 构造方法里也是把入参改为string token 最…

mail发送API的邮件安全性设置有哪些要点?

mail发送API的可靠性如何测试&#xff1f;API接口性能优化策略&#xff1f; 在当今数字化时代&#xff0c;邮件成为了个人和企业之间最重要的通信手段之一。为了保证邮件的安全性&#xff0c;mail发送API的正确配置显得尤为重要。AokSend将详细探讨mail发送API的安全性设置要点…

等保测评需要专用的SSL证书吗

等保测评全称为信息安全等级保护测评&#xff0c;是中国国内针对信息系统的安全性进行的一种评估机制。这一测评机制的主要目的是确保信息系统能够达到一定的安全防护水平&#xff0c;防止因信息安全问题导致的数据泄露、系统被攻击等风险。 在做等保测评的过程中不可避免的需…

工业应用中的简化电流隔离

当使用热电偶测量电机温度时&#xff0c;会产生毫伏级电压。如果这些电压通过几米长的电缆传输到参考不同地电位的中央控制单元&#xff0c;测量信号会因电位差而失真。 如果我们总结上述现象&#xff0c;就会出现以下四个挑战&#xff1a; 危险电压与用户之间的安全屏障 空…

人事档案管理系统/公司档案管理系统/企业人事管理系统/企业考勤管理系统/公司工资管理系统

获取源码联系方式请查看文章结尾&#x1f345; 摘 要 本文论述了人事档案管理系统的设计和实现&#xff0c;该网站从实际运用的角度出发&#xff0c;运用了计算机网站设计、数据库等相关知识&#xff0c;基于ssm框架和Mysql数据库设计来实现的&#xff0c;网站主要包括员工、…

SAP--无货源清单---信息记录对配额的影响 -----PR指定供应源的影响

1.当供应商直接维护好了配额之后 2.信息记录的价格对配额时候有影响 2.1信息记录的价格为0 2.2直接创建PR时候指定货源会自动根据配额比例带出供应商 3.信息记录失效的时候 3.1信息记录不在当前有效期内 3.2PR都是可以依据配额跑出来的 4.ME15对信息记录冻结之后的影响-----就…

Re:从零开始的逆向笔记01day

0-汇编语言 运算 AND(&) OR(|) XOR(^) NOT(~) SHL(<<) SHR/SAR(>>) 加法计算&#xff1a;异或&#xff0c;与左移一位&#xff08;重复&#xff09; 通用寄存器 32位16位8位EAXAXAL、AHECXCXCL、CHEDXDXDL、DHEBXBXBL、BHESPSPEBPBPESISIEDIDI 注&#x…

人工智能深度学习系列—深入解析:均方误差损失(MSE Loss)在深度学习中的应用与实践

文章目录 1. 背景介绍2. Loss计算公式3. 使用场景使用场景扩展 4. 代码样例5. 总结 1. 背景介绍 在深度学习的世界里&#xff0c;损失函数犹如一把尺子&#xff0c;衡量着模型预测与实际结果之间的差距。均方误差损失&#xff08;Mean Squared Error Loss&#xff0c;简称MSE …

BEVGPT展示自动驾驶的“全知视角”,预测决策规划三合一的革新之作!

前言 本篇文章由原paper一作Pengqin Wang&#xff08;王鹏钦&#xff09;全权翻译分享&#xff0c;王鹏钦为香港科技大学博士生&#xff0c;师从沈劭劼教授、朱美新教授。他的研究方向为自动驾驶和机器人系统中的决策、预测和规划。他的研究成果发表于TMECH、RAL、IROS、TRB等…

探索网络安全的多元维度:现状、趋势与实践

一、引言 在当今数字化飞速发展的时代&#xff0c;网络安全已成为至关重要的议题。从个人的隐私保护到企业的关键信息资产&#xff0c;从国家的基础设施到全球的信息网络&#xff0c;网络安全的影响无处不在&#xff0c;其重要性日益凸显。本文将深入且全面地探讨网络安全的多…

强化学习时序差分算法之多步Sarsa算法——以悬崖漫步环境为例

0.简介 蒙特卡洛方法利用当前状态之后每一步奖励而不使用任何价值估计&#xff0c;时序差分算法则只利用当前状态的奖励以及对下一状态的价值估计。 蒙特卡洛算法是无偏的&#xff0c;但是它的每一步的状态转移具有不确定性&#xff0c;同时每一步状态采取的动作所得到的不一样…

学习Java的日子 Day61 Listener监听器

Day61 Listener监听器 JavaWeb 三大组件(Servlet、Filter、Listener) 概念 监听器用于监听web应用中某些对象信息的创建、销毁、增加&#xff0c;修改&#xff0c;删除等动作的发生&#xff0c;然后作出相应的响应处理。当范围对象的状态发生变化的时候&#xff0c;服务器自动调…

vue echarts 横向柱状图,交错正负轴标签

横向柱状图&#xff1a; 同一个页面展示多个相同横向柱状图&#xff1b; 代码如下&#xff1a; <template><div style"display: flex;justify-content: space-around;"><div v-for"(chart,index) in barChartList" :key"index"…

基于LoRA和AdaLoRA微调Qwen1.5-0.5B-Chat

本文只开放基于LoRA和AdaLoRA微调代码,具体技术可以自行学习。 Qwen1.5-0.5B-Chat权重路径:https://huggingface.co/Qwen/Qwen1.5-0.5B 数据集路径:https://github.com/DB-lost/self-llm/blob/master/dataset/huanhuan.json 1. 知识点 LoRA, AdaLoRA技术 具体技术可以去看…

Transformer 架构告诉我们什么?

欢迎来到雲闪世界。ChatGPT 等大型语言模型 (LLM) 的出色表现震惊了世界。这一突破源于 Transformer 架构的发明&#xff0c;该架构出奇地简单且可扩展。它仍然由深度学习神经网络构建。主要新增功能是所谓的“注意力”机制&#xff0c;该机制将每个单词标记置于语境中。此外&a…

睿考网:CPA考试各科难度分析

CPA考试分为专业阶段和综合阶段两个部分&#xff0c;其中专业阶段包含六个科目&#xff0c;六科难度分别为大家介绍一下。 《会计》科目是CPA专业阶段中基础且难度较低的科目&#xff0c;同时也是核心的科目。对于零基础的考生来说&#xff0c;可能会感到困难&#xff0c;需要…

【C语言】堆的实现

堆的基本概念 堆在逻辑上是完全二叉树&#xff0c;那什么又是完全二叉树呢&#xff1f; 完全二叉树简单来说就是前n-1层每个节点都有两个儿子&#xff0c;最后一层叶子紧挨着排列。 堆在物理结构上适合用数组存储。 让我们先来学习树->二叉树的基本知识&#xff08;可看文…

verilog中的$radom函数

我需要产生一个背压。背压每次经过x个时钟周期之后翻转&#xff0c;x是0到1_6000间的一个随机数。 如下图的代码&#xff0c;($random % 10)产生的是-9到9的数&#xff0c;包括0&#xff0c; ($random % 10) 1 那么值就在 -8到10之间。 always (posedge clk) beginDATA_READ…