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

news2024/11/13 7:56:01

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

拖拽后表头不变的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.coloradmin.cn/o/1814931.html

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

相关文章

html和css创建一个简单的网页

html代码及解析 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>CSS Example</title><lin…

基于模型的理念:认知提升与研发模式转型

系统工程是从航空、航天等系统的开发过程中总结出来、用于指导复杂工程项目开展的方法论&#xff0c;是协调庞大团队完成复杂任务的技术和管理要素的综合&#xff0c;最新的国际标准将系统工程定义为“管控整个技术和管理活动的跨学科的方法&#xff0c;这些活动将一组客户的需…

Boost升压电路原理

电路拓扑图 Boost升压原理 阶段1&#xff1a;MOS管开启&#xff0c;电感位置a的电位为Vin&#xff0c;电感位置b的电位为0&#xff08;忽略MOS管压降&#xff09; 此时&#xff0c;电感电流线性上升&#xff0c;此阶段&#xff0c;输入源对电感充电 阶段2&#xff1a;MOS管断…

618数码产品哪些值得买?人气产品推荐!

随着618购物节的到来&#xff0c;你是否在琳琅满目的商品世界中感到无所适从&#xff0c;难以挑选出最符合心意的宝贝&#xff1f;团团为大家精心整理了一份甄选好物清单。让我们一起摆脱选择的困扰&#xff0c;锁定心仪的商品&#xff0c;在618的购物盛宴中尽情享受购物的乐趣…

STC8增强型单片机进阶开发--OLED显示器(SPI)

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

程序固化——FPGA学习笔记6

一、固化文件介绍 BIN:一般是由Vivado软件编译产生的&#xff0c;存储在特定目录下的二进制文件 MCS:一般通过VivadoGUl界面操作或者TCL命令生成&#xff0c;MCS文件里包含了BIN文件的内容&#xff0c;除此之外&#xff0c;每行的开始有地址信息&#xff0c;最后一个Byte是CRC校…

数字政府与大模型

1. 什么是数字政府&#xff1f; 数字政府是指运用信息技术&#xff0c;如互联网、大数据、云计算等&#xff0c;来改革政府的服务提供方式、决策过程和内部管理&#xff0c;以提升效率、透明度和公众参与度的新型政府形态。 2. 大模型在数字政府中的作用是什么&#xff1f; …

吃透Redis系列:数据一致性问题

欢迎关注微信公众号&#xff1a;互联网全栈架构 分布式缓存可能是Redis最常见的应用场景了。缓存里的热点数据一般来自于关系型数据库&#xff0c;这样的话&#xff0c;就会存在缓存与数据库的数据一致性问题。 当然&#xff0c;这种数据不一致性主要是针对写操作来说的&#x…

7-1RT-Thread邮箱

7-1RT-Thread邮箱 同步实现了多线程在访问共享资源时执行顺序的控制。如线程1实现串口的监控&#xff0c;当串口接收到数据后通知线程2读取数据&#xff0c;相当于只给了通知&#xff0c;而没有给通知的具体内容&#xff0c;而通信则是将通知的具体内容也告知对方。如线程1负责…

vulnhub靶机coffeeaddicts

下载地址&#xff1a;https://www.vulnhub.com/entry/coffee-addicts-1,699/ 主机发现 目标132 端口扫描 服务扫描 漏洞扫描 只能看web 改hosts 再次访问web 经典被黑 &#xff1f;这算彩蛋吗 还是扫描一下web dirb的结果 不需要看完就知道这个是wp搭建的 gobuster的结果 扫…

网站线上模板建设的优缺点

优点&#xff1a; 1.搭建的时间短&#xff0c;在线建站&#xff0c;只需要登录注册然后选择网站模板创建网站即可管理自己的网站后台&#xff0c;就几步操作就可以实现。 2.网站出错率少&#xff0c;因为有很多用户在使用&#xff0c;前期所报出来的问题就已经一一…

10倍加速!揭秘IDM下载器的惊人秘密!

在数字化时代的浪潮下&#xff0c;互联网下载工具的多样性使得用户在选择时往往感到迷茫。其中&#xff0c;Internet Download Manager&#xff08;IDM&#xff09;作为一款高效的下载管理工具&#xff0c;因其加速下载、支持多线程下载和恢复中断下载等功能而受到广泛关注。然…

gcc编译时报错 fatal error: stdio.h: 没有那个文件或目录

在kylinV10中使用GCC编译代码时遇到如下问题&#xff1a; 首先确认了&#xff0c;自己单词没有拼写错。然后再检查GCC的版本&#xff0c;确实没问题。 没有标准的头文件需要安装build-essential来解决。 需要安装build-essential。 执行以下命令&#xff1a; sudo apt-get in…

MT2093 活动安排

贪心策略&#xff1a; 每次选择结束时间最早的活动 代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 5e5 10; int n; struct pp {int a, b; } p[N]; bool cmp(pp x, pp y) {return x.b < y.b; } int ans 0;int main() {cin >>…

Edge浏览器 解决Google:but your computer or network may be sending automated queries.

最近使用Edge在Google学术网上下论文很多&#xff0c;可能触发了Google的保护机制&#xff0c;便出现如下报错&#xff1a; 网上找了很多资料&#xff0c;都说要关闭Chrome浏览器QUIC协议 &#xff0c;如解决Google提示&#xff1a;but your computer or network may be sendin…

最短路:spfa算法

最短路&#xff1a;spfa算法 题目描述参考代码![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3be484da34a84911a0a7dab3f1d84945.png) 题目描述 参考代码 输入示例 3 3 1 2 5 2 3 -3 1 3 4输出示例 2#include <iostream> #include <cstring> #inc…

终极珍藏,新程序员 002 仅剩最后 3 本!一文 Get 订阅指南

《新程序员002&#xff1a;新数据库时代 & 软件定义汽车》纸质版即将售罄&#xff0c;目前纸书仅剩最后 3 本&#xff0c;连同「新程序员001 至 004 期」整套纸质书籍也仅剩 3 套。其中新程序员 001、003、004 纸质版库存也处于告急状态&#xff5e; 购买新程序员001、003、…

实现AI口语练习软件的流程

实现AI口语练习软件需要经过以下几个步骤&#xff0c;包括需求分析、技术选型、系统设计、软件开发、软件测试、软件部署和软件维护。和常用的软件开发流程是类似的&#xff0c;不同点在于AI口语软件需要实现几个技术难点。北京木奇移动技术有限公司&#xff0c;专业的软件外包…

成功编码:加强制造业的软件生命周期

从简化工作流程、提高性能到符合法规要求&#xff0c;架构验证与软件质量保证流程的整合站在了创新的最前沿。了解如何在工业自动化领域保持竞争力。 软件分析和测试在工业自动化中发挥着至关重要的作用。虽然手动测试对于解决微妙问题&#xff0c;尤其是与人类安全相关的问题&…

SAP CO01创建BAPI增强 COXT_BAPI_ORDER_CREATE

生产订单BAPI&#xff1a;COXT_BAPI_ORDER_CREATE不包含EXTENSIONIN参数&#xff0c;考虑到事务提交一致性&#xff0c;故对此BAPI进行增强&#xff0c;使其支持增强字段的更新。 1.对传入参数IS_HEADER进行扩张。 2.添加以下代码&#xff1a; 以上&#xff0c;即可调用BAPI时同…