解决Sortable拖动el-table表头时,由于选择列造成的拖拽顺序错乱的bug

本文主要是介绍解决Sortable拖动el-table表头时,由于选择列造成的拖拽顺序错乱的bug,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  • 原因 由于我的表头是由数组循环遍历生成的,而选择列不在数组内,只能在循环外定义el-table-column,造成拖动时索引错乱
  • 错误代码
  <el-table@header-dragend="headerDragend"id="out-table":data="state.sliceTable"borderstriperef="TableRef":row-key="getRowKeys(pageData)"><el-table-column type="selection" width="55" fixed /> 
><template v-for="(item, index) in state.pageDataTitle" :key="index"> <el-table-column:prop="item.value":label="item.name":key="index"><template #default="scope"><slot :name="item.value" :scope="scope">{{ scope.row[item.value] }}</slot></template></el-table-column></template></el-table>
  • 解决办法  向数组开头push一条 type="selection" 的对象 并把el-table-column 写到循环体内
  <template v-for="(item, index) in state.pageDataTitle" :key="index"><el-table-column type="selection" v-if="item.type" width="55" fixed /><el-table-column:prop="item.value":label="item.name":key="index"><template #default="scope"><slot :name="item.value" :scope="scope">{{ scope.row[item.value] }}</slot></template></el-table-column></template>
  •  当拖动选择列 或 拖向选择列时 仍然会造成拖动顺序混乱 所以我们要禁止掉
  • 给el-table-column添加 class-name="allowdrag" 表示除了选择列之外都可以拖动
  <el-table-columnclass-name="allowdrag":label="item.name":key="index"><template #default="scope"><slot :name="item.value" :scope="scope">{{ scope.row[item.value] }}</slot></template></el-table-column>
//拖拽列
const columnDrop2 = (dom) => {if (!dom) returnSortable.create(dom.$el.querySelector('.el-table__header-wrapper>.el-table__header tr'), {handle: '.allowdrag',  //除了选择列都可以选择onEnd: (sortableEvent) => {const targetThElem = sortableEvent.item;const wrapperElem = targetThElem.parentNode;const newIndex = sortableEvent.newIndex;const oldIndex = sortableEvent.oldIndex;const oldTrElement = wrapperElem.children[oldIndex];const currRow = state.pageDataTitle?.splice(oldIndex, 1)[0];state.pageDataTitle?.splice(newIndex, 0, currRow);if (newIndex > oldIndex) {wrapperElem.insertBefore(targetThElem, oldTrElement)} else {wrapperElem.insertBefore(targetThElem,oldTrElement ? oldTrElement.nextElementSibling : oldTrElement)}},})
}
  • 这样解决了选择列向其他列拖动 ,但没有解决其他列向选择列拖动 
  • 解决办法 添加 :header-cell-class-name="tableRowClassName" 并添加onMove方法
  <el-table:header-cell-class-name="tableRowClassName"id="out-table":data="state.sliceTable"ref="TableRef"><template v-for="(item, index) in state.pageDataTitle" :key="index"><el-table-column type="selection" v-if="item.type" width="55" fixed /><el-table-columnclass-name="allowdrag":prop="item.value":label="item.name":key="index"><template #default="scope"><slot :name="item.value" :scope="scope">{{ scope.row[item.value] }}</slot></template></el-table-column></template></el-table>
//解决向选择列拖动的bugfunction tableRowClassName(row) {if (row.columnIndex == 0) {return "filtered";}return "";}
//拖拽列
const columnDrop2 = (dom) => {if (!dom) returnSortable.create(dom.$el.querySelector('.el-table__header-wrapper>.el-table__header tr'), {handle: '.allowdrag',onEnd: (sortableEvent) => {const targetThElem = sortableEvent.item;const wrapperElem = targetThElem.parentNode;const newIndex = sortableEvent.newIndex;const oldIndex = sortableEvent.oldIndex;const oldTrElement = wrapperElem.children[oldIndex];const currRow = state.pageDataTitle?.splice(oldIndex, 1)[0];state.pageDataTitle?.splice(newIndex, 0, currRow)if (newIndex > oldIndex) {wrapperElem.insertBefore(targetThElem, oldTrElement)} else {wrapperElem.insertBefore(targetThElem,oldTrElement ? oldTrElement.nextElementSibling : oldTrElement)}},//解决向选择列拖动的bugonMove(e) {return e.related.className.indexOf("filtered") === -1;}})
}

完整代码

  <el-table:header-cell-class-name="tableRowClassName"id="out-table":data="state.sliceTable"ref="TableRef"><template v-for="(item, index) in state.pageDataTitle" :key="index"><el-table-column type="selection" v-if="item.type" width="55" fixed /><el-table-columnclass-name="allowdrag":prop="item.value":label="item.name":key="index"><template #default="scope"><slot :name="item.value" :scope="scope">{{ scope.row[item.value] }}</slot></template></el-table-column></template></el-table>
//拖拽列
const columnDrop2 = (dom) => {if (!dom) returnSortable.create(dom.$el.querySelector('.el-table__header-wrapper>.el-table__header tr'), {handle: '.allowdrag',onEnd: (sortableEvent) => {const targetThElem = sortableEvent.item;const wrapperElem = targetThElem.parentNode;const newIndex = sortableEvent.newIndex;const oldIndex = sortableEvent.oldIndex;const oldTrElement = wrapperElem.children[oldIndex];const currRow = state.pageDataTitle?.splice(oldIndex, 1)[0];state.pageDataTitle?.splice(newIndex, 0, currRow)if (newIndex > oldIndex) {wrapperElem.insertBefore(targetThElem, oldTrElement)} else {wrapperElem.insertBefore(targetThElem,oldTrElement ? oldTrElement.nextElementSibling : oldTrElement)}},//解决向选择列拖动的bugonMove(e) {return e.related.className.indexOf("filtered") === -1;}})
}//解决向选择列拖动的bugfunction tableRowClassName(row) {if (row.columnIndex == 0) {return "filtered";}return "";}

效果图

QQ录屏20231211155823

这篇关于解决Sortable拖动el-table表头时,由于选择列造成的拖拽顺序错乱的bug的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/483680

相关文章

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时,有时会遇到由于找不到qt5core.dll,无法继续执行代码,这个问题可能是由于该文... 遇到qt5cored.dll文件错误时,可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。

关于跨域无效的问题及解决(java后端方案)

《关于跨域无效的问题及解决(java后端方案)》:本文主要介绍关于跨域无效的问题及解决(java后端方案),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录通用后端跨域方法1、@CrossOrigin 注解2、springboot2.0 实现WebMvcConfig

Go语言中泄漏缓冲区的问题解决

《Go语言中泄漏缓冲区的问题解决》缓冲区是一种常见的数据结构,常被用于在不同的并发单元之间传递数据,然而,若缓冲区使用不当,就可能引发泄漏缓冲区问题,本文就来介绍一下问题的解决,感兴趣的可以了解一下... 目录引言泄漏缓冲区的基本概念代码示例:泄漏缓冲区的产生项目场景:Web 服务器中的请求缓冲场景描述代码

解决JSONField、JsonProperty不生效的问题

《解决JSONField、JsonProperty不生效的问题》:本文主要介绍解决JSONField、JsonProperty不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录jsONField、JsonProperty不生效javascript问题排查总结JSONField

github打不开的问题分析及解决

《github打不开的问题分析及解决》:本文主要介绍github打不开的问题分析及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、找到github.com域名解析的ip地址二、找到github.global.ssl.fastly.net网址解析的ip地址三

Java中JSON格式反序列化为Map且保证存取顺序一致的问题

《Java中JSON格式反序列化为Map且保证存取顺序一致的问题》:本文主要介绍Java中JSON格式反序列化为Map且保证存取顺序一致的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未... 目录背景问题解决方法总结背景做项目涉及两个微服务之间传数据时,需要提供方将Map类型的数据序列化为co

RedisTemplate默认序列化方式显示中文乱码的解决

《RedisTemplate默认序列化方式显示中文乱码的解决》本文主要介绍了SpringDataRedis默认使用JdkSerializationRedisSerializer导致数据乱码,文中通过示... 目录1. 问题原因2. 解决方案3. 配置类示例4. 配置说明5. 使用示例6. 验证存储结果7.