解决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"
            border
            scrollbar-always-on
            ref="tableHeader"
            row-key="id"
        >
            <template v-for="(item, index) in setColumns" :key="index">
                <!-- 操作列 -->
                <el-table-column
                    v-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-column
                    v-else-if="item.prop === 'index'"
                    :type="item.type"
                    :label="item.label"
                    :width="item.width || 100"
                />
                <!-- 数据列 -->
                <el-table-column
                    v-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.mfbz.cn/a/704848.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

远程主机强迫关闭了一个现有的连接redis

引言 在使用 Redis 进行开发和运维过程中&#xff0c;我们可能会遇到 Redis 连接被远程主机强制关闭的情况。本文将介绍造成这种情况的原因&#xff0c;并给出一些处理方法和建议。 远程主机强制关闭连接的原因 远程主机强制关闭连接通常是由于网络不稳定、连接超时、Redis 配…

技术流 | ClickHouse工具ckman v3.1.3 sinker v3.1.8 版本发布

【本文作者&#xff1a;擎创科技 ClickHouse专家&#xff0c;ckman作者禹鼎侯】 在这个端午小长假里&#xff0c;ckman和clickhouse_sinker分别带来了全新的版本。让我们一起来看看&#xff0c;新版本都有哪些新特性吧&#xff01; ckman v3.1.3新版本特性 ckman v3.1.3作为…

多校园跑腿小程序源码系统 帮取+代拿+外卖配送 功能超多 带完整的安装代码包+搭建部署教程

系统概述 多校园跑腿小程序源码系统 是一款基于微信小程序平台开发的全功能校园服务应用。该系统采用先进的前后端分离架构&#xff0c;结合云服务技术&#xff0c;确保了系统的高可用性、可扩展性和安全性。系统设计之初就充分考虑到了多校园环境的特殊性&#xff0c;支持多校…

ToF原理记录

目录 1. ToF是什么&#xff1f;2. ToF深度测量原理2.1 脉冲调制法2.2 连续波调制法 1. ToF是什么&#xff1f; 飞行时间&#xff08;Time-of-Flight&#xff0c;ToF&#xff09;基本原理是通过连续发射光脉冲&#xff08;一般为不可见光&#xff09;到目标物体上&#xff0c;然…

《大道平渊》· 拾叁 —— 失眠?忍不住乱想?不如反其道而行之!

《平渊》 拾叁 "睡觉的时候就是要胡思乱想" 声明&#xff1a;以下内容针对非失眠症人群&#xff0c;如果失眠不是偶尔发生&#xff0c;而是长期存在&#xff0c;以下内容和你无关&#xff0c;请尽早治疗&#xff0c;遵循医嘱。 失眠的本质是什么&#xff1f;心理因素…

刚实习的大学生如何避免招聘骗局?

大学生在求职过程中&#xff0c;常常成为招聘骗局的受害者。为了避免这种情况&#xff0c;大学生需要提高警惕&#xff0c;采取一系列措施来防范招聘骗局。以下是一些建议&#xff1a; 首先&#xff0c;大学生应当保持警惕&#xff0c;不轻信招聘信息。在求职时&#xff0c;务…

6.8日志系统

当做大型项目的时候&#xff0c;出了bug可能需要借助于日志检查&#xff0c;小项目一般是打断点。 服务器是一直在运行的&#xff0c;不能停止&#xff0c;可以借助于日志检查错误。 日志分为两种&#xff1a;业务级别的日志&#xff08;供用户分析业务过程&#xff09;&…

pioneer电源维修PM33213BP-10P-1-6PH-H

开关电源出现不启振的时候&#xff0c;我们通常需要查看开关频率是否正确、保护电路是否断路、电压反馈电路、电流反馈电路又没问题&#xff0c;开关管是否击穿等。 电源维修实践中&#xff0c;有许多开关电源采用UC38系列8脚PWM组件&#xff0c;大多数电源不能工作都是因为电…

基于单片机的多功能智能小车设计

第一章 绪论 1.1 课题背景和意义 随着计算机、微电子、信息技术的快速发展,智能化技术的发展速度越来越快,智能化与人们生活的联系也越来越紧密,智能化是未来社会发展的必然趋势。智能小车实际上就是一个可以自由移动的智能机器人,比较适合在人们无法工作的地方工作,也可…

JVM产生FullGC的原因有哪些?

JVM产生FullGC的原因有哪些&#xff1f; 在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;垃圾回收&#xff08;Garbage Collection&#xff0c;简称GC&#xff09;是一个非常重要的机制。GC的目的是自动管理内存&#xff0c;回收不再使用的对象&#xff0c;防止内存泄…

python数据分析-房价数据集聚类分析

一、研究背景和意义 随着房地产市场的快速发展&#xff0c;房价数据成为了人们关注的焦点。了解房价的分布特征、影响因素以及不同区域之间的差异对于购房者、房地产开发商、政府部门等都具有重要的意义。通过对房价数据的聚类分析&#xff0c;可以深入了解房价的内在结构和规…

Android低代码开发 - 直接创建一个下拉刷新列表界面

看了我Android低代码开发 - 让IDE帮你写代码这篇文章的小伙伴&#xff0c;大概都对Dora全家桶开发框架有基本的认识了吧。本篇文章将会讲解如何使用dora-studio-plugin快捷创建一个下拉刷新列表界面。 效果演示 这样直接通过图形界面的方式就创建好了下拉刷新上拉加载空态界面…

如何高效管理和监控 Elasticsearch 别名及索引?

0、引言 在 Elasticsearch 项目中&#xff0c;管理和监控索引是开发者的一项重要任务。 尤其是当我们需要在项目的管理部分展示索引和别名的统计信息时&#xff0c;了解如何有效地列出这些别名和索引显得尤为重要。 本篇博客将介绍几种在 Elasticsearch 中列出别名和索引的方法…

用表头设置控制表格内列的排序和显示隐藏

项目背景 : react ant 需求 : 点击表头设置弹窗 , 拖拽可控制外部表格列的排序 , 开关可控制外部表格列的显示和隐藏 实现效果如下 :注意 : 1. 拖拽效果参考了ant-table中的拖拽效果(这块代码放最后) 2. 后台反了json格式(用is_show控制显示和隐藏 , 我给他传…

【应用案例】如何解决无人驾驶车辆的动力转向问题

埃尔朗根-纽伦堡大学名称为高能赛车运动队(High-Octane Motorsports e.V.)的学生方程式车队都设计、构建和制造具有创新意义且独特的赛车。然后&#xff0c;他们将参加三种不同类别的大学生方程式比赛&#xff1b;该项赛事中的参赛队伍来自于世界各地。 电动、无人驾驶和燃油车…

17.路由配置与页面创建

路由配置与页面创建 官网&#xff1a;https://router.vuejs.org/zh/ Vue Router 和 组合式 API | Vue Router (vuejs.org) 1. 修改index.ts import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router"; import Layout from /layout/Index.vueco…

python长方形周长面积 2024年3月青少年编程电子学会python编程等级考试二级真题解析

目录 python长方形周长面积 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python长方形周长面积 2024年3月 python编程等级考试级编程题 一、…

linux系统宝塔服务器temp文件夹里总是被上传病毒php脚本

目录 简介 上传过程 修复上传漏洞 tmp文件夹总是被上传病毒文件如下图: 简介 服务器时不时的会发送短信说你服务器有病毒, 找到了这个tmp文件, 删除了之后又有了。 确实是有很多人就这么无聊, 每天都攻击你的服务器。 找了很久的原因, 网上也提供了一大堆方法,…

天锐绿盾 | 无感知加密软件、透明加密系统、数据防泄漏软件

摘要&#xff1a;文件加密软件,包含禁止非授权的文件泄密和抄袭复制解决方案即使被复制泄密都是自动加密无法阅读,透明加密,反复制软件,内网监控,文件加密,网络安全方案,透明文件加密,加密文件,图纸加密,知识产权保护,加密数据; 通过绿盾信息安全管理软件&#xff0c;系统在不改…

2024/06/13--代码随想录算法2/17| 62.不同路径、63. 不同路径 II、343. 整数拆分 (可跳过)、96.不同的二叉搜索树 (可跳过)

62.不同路径 力扣链接 动态规划5步曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a; dp[i][j] &#xff1a;表示从&#xff08;0 &#xff0c;0&#xff09;出发&#xff0c;到(i, j) 有dp[i][j]条不同的路径。确定递推公式&#xff0c;dp[i][j] d…