当前位置: 首页 > news >正文

解决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        即可解决。

相关文章:

  • 算法训练营day24
  • 触摸芯片在物联网和人工智能上的应用
  • udp协议下的socket函数
  • 将Firefox插件导入Edge/Chrome中
  • Redis客户端界面工具QuickRedis
  • 6_1 Linux 用户管理
  • Cohere reranker 一致的排序器
  • 【论文复现|智能算法改进】基于改进鲸鱼优化算法的移动机器人多目标点路径规划
  • 1.Vue2使用ElementUI-初识及环境搭建
  • ViewModel、Lifecycles、LiveData基本使用
  • TK防关联引流系统:全球多账号运营,一“键”掌控!
  • Typora 破解、激活!亲测有效!2024 最新激活方法
  • 排序-快排算法对数组进行排序
  • 6-11 函数题:某范围中的最小值
  • 源代码防泄密经验分享之安全上网篇
  • python3.6+scrapy+mysql 爬虫实战
  • Git学习与使用心得(1)—— 初始化
  • Java多态
  • JS进阶 - JS 、JS-Web-API与DOM、BOM
  • JS实现简单的MVC模式开发小游戏
  • Protobuf3语言指南
  • SQLServer之索引简介
  • Swoft 源码剖析 - 代码自动更新机制
  • zookeeper系列(七)实战分布式命名服务
  • 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1
  • 爱情 北京女病人
  • 面试总结JavaScript篇
  • 排序算法之--选择排序
  • 时间复杂度与空间复杂度分析
  • #AngularJS#$sce.trustAsResourceUrl
  • #我与Java虚拟机的故事#连载07:我放弃了对JVM的进一步学习
  • (bean配置类的注解开发)学习Spring的第十三天
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (Ruby)Ubuntu12.04安装Rails环境
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (汇总)os模块以及shutil模块对文件的操作
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • (转)h264中avc和flv数据的解析
  • (转)linux 命令大全
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .bat批处理(七):PC端从手机内复制文件到本地
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets?
  • .net连接oracle数据库
  • .NET下的多线程编程—1-线程机制概述
  • .NET学习教程二——.net基础定义+VS常用设置
  • .NET中的Event与Delegates,从Publisher到Subscriber的衔接!
  • [2017][note]基于空间交叉相位调制的两个连续波在few layer铋Bi中的全光switch——
  • [Android] 240204批量生成联系人,短信,通话记录的APK
  • [Angular 基础] - 表单:响应式表单
  • [ArcPy百科]第三节: Geometry信息中的空间参考解析
  • [C]整形提升(转载)