解决el-table表格拖拽后,只改变了数据,表头没变的问题

先看看是不是你想要解决的问题

拖拽后表头不变的bug修复

这个问题一般是使用v-for对column的数据进行循环的时候,key值绑定的是个index导致的,请看我上篇文章eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽):-CSDN博客文章浏览阅读36次。对于列拖拽:点击某列的表头前后挪移时,松开鼠标左键后,挪移的列就应该在哪列显示。行拖拽:和列拖拽一样。https://blog.csdn.net/weixin_42234899/article/details/139627036?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22139627036%22%2C%22source%22%3A%22weixin_42234899%22%7D

<div><el-table:data="tableData"borderscrollbar-always-onref="tableHeader"row-key="id"><template v-for="(item, index) in setColumns" :key="index"><!-- 操作列 --><el-table-columnv-if="item.prop === 'oprate'"fixed="right":prop="item.prop":label="item.label"><template #header><div class="search-title"><div :class="checked ? 'search-titleName' : ''">操作</div><el-icon class="search-icon" @click="search"><Search color="#409EFF" /></el-icon></div></template></el-table-column><!-- 序号列 --><el-table-columnv-else-if="item.prop === 'index'":type="item.type":label="item.label":width="item.width || 100"/><!-- 数据列 --><el-table-columnv-else:prop="item.prop":label="item.label":width="item.width || 100"/></template></el-table></div>

把v-for循环的key值绑定为其他的唯一值就可以修复这个问题。主要是因为在拖拽后,改变数据的位置,及setColumns数组的顺序,但在循环时的key值,在拖拽前和拖拽后的key值是一样的,所以表头的数据显示不会改变。我在这里,把        :key=index        改成了        :key=item.label        即可解决。

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

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

相关文章

FastAPI操作关系型数据库

FastAPI可以和任何数据库和任意样式的库配合使用&#xff0c;这里看一下使用SQLAlchemy的示例。下面的示例很容易的调整为PostgreSQL&#xff0c;MySQL&#xff0c;SQLite&#xff0c;Oracle等。当前示例中我们使用SQLite ORM对象关系映射 FastAPI可以与任何数据库在任何样式…

eFuse电子保险丝,需要了解的技术干货来啦

热保险丝作为一种基本的电路保护器件&#xff0c;已经成功使用了150多年。热保险丝有效可靠、易用&#xff0c;具有各种不同的数值和版本&#xff0c;能够满足不同的设计目标。然而&#xff0c;对于寻求以极快的速度切断电流的设计人员来说&#xff0c;热保险丝不可避免的缺点就…

联邦学习论文阅读:2018 Federated learning with non-IID data

介绍 这是一篇2018年挂在arXiv上的文章&#xff0c;是一篇针对FL中数据Non-IID的工作。 作者发现&#xff0c;对于高度Non-IID的数据集&#xff0c;FedAvg的准确性下降了55%。 作者提出了可以用权重散度&#xff08;weight divergence&#xff09;来解释这种性能下降&#xff…

Redis跳表

Redis跳表 跳表是一种有序数据结构&#xff0c;它通过在每个节点维持多个指向其他节点的指针&#xff0c;从而达到快速访问节点的目的 跳表支持平均O&#xff08;logN&#xff09;&#xff0c;最坏O&#xff08;N&#xff09;复杂度的节点查找&#xff0c;还可以通过顺序性操作…

【SCAU数据挖掘】数据挖掘期末总复习题库简答题及解析——上

1.K-Means 假定我们对A、B、C、D四个样品分别测量两个变量&#xff0c;得到的结果见下表。 样品 变量 X1X2 A 5 3 B -1 1 C 1 -2 D -3 -2 利用K-Means方法将以上的样品聚成两类。为了实施均值法(K-Means)聚类&#xff0c;首先将这些样品随意分成两类(A、B)和(C、…

Ubuntu下使用`sysbench`来测试CPU性能

使用 sysbench 来测试 CPU 性能是一个常见的方法。sysbench 是一个模块化的跨平台基准测试工具&#xff0c;常用于评估系统的各个组件&#xff08;例如 CPU、内存、I/O 子系统等&#xff09;的性能。 下面是如何使用 sysbench 来测试 CPU 性能的基本步骤&#xff1a; 1. 安装…

车载电子电气架构 - 智能座舱技术及功能应用

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

论文解读——《I2EDL: Interactive Instruction Error Detection and Localization》

一、研究背景 视觉与语言导航&#xff08;VLN&#xff09;是一个AI领域的研究任务&#xff0c;旨在开发能够按照自然语言指令在三维空间中导航到指定位置的智能体。这项任务与人类的日常活动——如按照口头指示到达某个地点——十分相似&#xff0c;对于推动人机交互的自然性和…

【智能算法应用】基于混合粒子群-蚁群算法的多机器人多点送餐路径规划问题

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】粒子群算法&#xff08;PSO&#xff09;原理及实现 配餐顺序&#xff1a; 采用混合粒子群算法 || 路径规划&#xff1a; 采用蚁群算法 2.数学模型 餐厅送餐多机器人多点配送路径规划&…

linux系统——wget命令

wget命令可以用于下载指定的url地址文件&#xff0c;支持断点续传&#xff0c;支持ftp&#xff0c;http协议下载&#xff0c;在下载普通文件时&#xff0c;即使网络出现故障&#xff0c;依然会不断尝试下载 wget命令直接加url地址 使用-o参数可以将下载文件改名&#xff0c;-c…

AXI Quad SPI IP核中的STARTUPEn原语参数

启动STARTUPEn Primitive &#xff08;原语&#xff09;参数在 FPGA的主 SPI模式下非常有用。当你启用这个参数时&#xff0c;对于 7 系列设备&#xff0c;STARTUPE2 原语会被包含在设计中&#xff1b;而对于 UltraScale™ 设备&#xff0c;则是 STARTUPE3 原语。这些原语在 FP…

CentOS手工升级curl记

笔者一台服务器装有 CentOS 7.9 系统&#xff0c;运行 curl -V 查询 curl 的版本是 7.29&#xff0c;这个老版本的 curl 不支持 HTTP/2 协议。为了使 curl 能连接HTTP/2&#xff0c;curl 必须升级到至少7.46.0版本以上。查询 curl的官网得知当前最新版本是 8.8.0&#xff0c;然…

【智能算法应用】基于粒子群算法的多尺度Retinex图像去雾方法

目录 1.算法原理2.粒子群算法的多尺度Retinex图像去雾方法3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】粒子群算法&#xff08;PSO&#xff09;原理及实现 多尺度Retinex算法 在Retinex算法中&#xff0c;雾化图像的形成可以总结为入射光和反射光的乘积: I ( x…

第 3 章:Spring Framework 中的 AOP

第 3 章&#xff1a;Spring Framework 中的 AOP 讲完了 IoC&#xff0c;我们再来聊聊 Spring Framework 中的另一个重要内容——面向切面编程&#xff0c;即 AOP。它是框架中众多功能的基础&#xff0c;例如声明式事务就是依靠 AOP 来实现的。此外&#xff0c;Spring 还为我们…

创邻科技张晨:期待解锁图技术在供应链中的关联力

近日&#xff0c;创邻科技创始人兼CEO张晨博士受浙江省首席信息官协会邀请&#xff0c;参加数字化转型与企业出海研讨会。 此次研讨会旨在深入探讨数字经济时代下&#xff0c;企业如何有效应对成本提升与环境变化所带来的挑战&#xff0c;通过数字化转型实现提效增益&#xff…

4090显卡 安装cuda 11.3 版本

文章目录 cuda 安装安装过程中会要求选择安装的内容更改cuda地址到你安装的地方 cuda 安装 cuda官网寻找cuda11.3 版本 https://developer.nvidia.com/cuda-11.3.0-download-archive?target_osLinux&target_archx86_64&DistributionUbuntu&target_version20.04&…

yolo-inference多后端+多任务+多算法+多精度模型 框架开发记录(python版)

先贴出github地址&#xff0c;欢迎大家批评指正&#xff1a;https://github.com/taifyang/yolo-inference 不知不觉LZ已经快工作两年了&#xff0c;由于之前的工作内容主要和模型部署相关&#xff0c;想着利用闲暇时间写一些推理方面的经验总结&#xff0c;于是有了这个工程。其…

边缘计算网关在智慧厕所远程监测与管理的应用

随着智慧城市建设的不断深入&#xff0c;城市公共设施的智慧化管理成为了提升城市品质和居民生活质量的关键建设。公厕作为城市基础设施的重要组成部分&#xff0c;其管理效率和卫生状况直接影响着市民的日常生活体验。在公厕设施建设背景下&#xff0c;边缘计算网关技术的应用…

【JS重点09】JS闭包(面试重点)

本文核心目标&#xff1a;阅读完本文能说出什么是闭包&#xff0c;闭包作用以及如何利用闭包 一&#xff1a;闭包概览 1 闭包是什么 闭包&#xff08;closure&#xff09;是一个函数以及其捆绑的周边环境状态&#xff08;lexical environment&#xff0c;词法环境&#xff09…

如何将接口返回/n替换为react.js中的换行符

将每个/n替换为ReactJS中的一个<br>标记。cpa_ability为后端返回的字段名