解决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

相关文章

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同,并且无论如何都没有中文选项?这个问题也

MySQL CTE (Common Table Expressions)示例全解析

《MySQLCTE(CommonTableExpressions)示例全解析》MySQL8.0引入CTE,支持递归查询,可创建临时命名结果集,提升复杂查询的可读性与维护性,适用于层次结构数据处... 目录基本语法CTE 主要特点非递归 CTE简单 CTE 示例多 CTE 示例递归 CTE基本递归 CTE 结

Spring Bean初始化及@PostConstruc执行顺序示例详解

《SpringBean初始化及@PostConstruc执行顺序示例详解》本文给大家介绍SpringBean初始化及@PostConstruc执行顺序,本文通过实例代码给大家介绍的非常详细,对大家的... 目录1. Bean初始化执行顺序2. 成员变量初始化顺序2.1 普通Java类(非Spring环境)(

java内存泄漏排查过程及解决

《java内存泄漏排查过程及解决》公司某服务内存持续增长,疑似内存泄漏,未触发OOM,排查方法包括检查JVM配置、分析GC执行状态、导出堆内存快照并用IDEAProfiler工具定位大对象及代码... 目录内存泄漏内存问题排查1.查看JVM内存配置2.分析gc是否正常执行3.导出 dump 各种工具分析4.

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤