记录一次el-table+sortablejs的拖拽bug

bug回顾

出现bug的情况时 当编辑表格过于紧凑的时候 有些非必要编辑或需要一眼看到的数据 移动到了el-table-column type=expand时 同事:怎么拖拽功能用不了了 ok开始检查代码
当原来是个简单的编辑表格 不涉及展开和简单拖拽时 不会出现问题
解决了 出现了展开行以后 拖拽索引的变动以及展开行被算作单独索引的问题

问题复盘

1. 同事:拖拽完以后 不能再拖拽了

测试后 发现报错了 出现了渲染报错的问题 检查sortable onEnd函数 发现插入了一个undefined数据 那就可能是expand行导致的 那我就优化一下 当拖拽的时候隐藏所有展开行 在onStart中加入代码
onEnd加入为空时不插入的代码

        onStart() {for (let item of that.showTable) {that.$refs.table.toggleRowExpansion(item, false);}},

2.拖拽时隐藏展开行的时候 功能实现了 但是出现了展开位置变异的问题

向上拖拽隐藏 重渲染表格的时候出现 展开行跑到上面去了

在这里插入图片描述
开始检查问题 继续检查数据源看看有没什么问题 onEnd时打印出来 检查出来发现 走到了!currentRow

          const currentRow = that.showTable.splice(oldIndex, 1)[0];if (!currentRow) return;

打印出来oldIndex=2 我就两条测试数据 所以 其实并没有触发正常的交换位置 仅仅只是sortable 自己把dom的位置交换了 我还纳闷了 为什么没有重新渲染 原来是索引出错了 我们估计还是把expand当作一行放进去了

那我们检查看dom 发现每个展开的行就是一个tr 那我们加上draggable为 .el-table__row试试
在这里插入图片描述
捶桌子 结果还是一样 那问题还是出在index上 打印evt出来 发现 果然还是这个问题 那我们就替换为drgaableIndex
在这里插入图片描述

          let newIndex = newDraggableIndex;let oldIndex = oldDraggableIndex;//   删除当前行,放到拖拽后的位置const currentRow = that.showTable.splice(oldIndex, 1)[0];if (!currentRow) return;that.showTable.splice(newIndex, 0, currentRow);

问题圆满解决

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/94508.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/94508.shtml

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

相关文章

利用go sort.Sort()排序自定义切片

1 sort.Sort()简介2 核心功能3 调用前提4 代码示例 1 sort.Sort()简介 Go语言中的sort.Sort函数是标准库提供的通用排序接口 2 核心功能 核心功能支持多种类型进行快速排序 基础类型支持‌:内置Ints、Float64s、Strings等函数直接排序常见切片 自定义排序‌&a…

Elasticsearch脑裂紧急处理与预防

在 Elasticsearch 中出现 网络分区(Network Partition) 或 脑裂(Split-Brain) 导致两个子集群各自选出 Master 的情况,是非常严重的问题。比如这个场景(20个节点分裂成两个10节点的子集群,各自选…

华为网路设备学习-29(BGP协议 四)路由策略-实验

示例 延伸-具体实验1.代码部分:基础配置R1 [Huawei]int GigabitEthernet 0/0/0 [Huawei-GigabitEthernet0/0/0]ip address 10.1.13.1 24[Huawei]int LoopBack 1 [Huawei-LoopBack1]ip address 172.16.1.1 24 [Huawei-LoopBack1]q [Huawei]int LoopBack 2 [Huawei-Lo…

500系列状态码与可能的场景

501 Not Implemented(未实现)HTTP 方法不支持客户端发送了 PUT、DELETE、PATCH 请求但服务器只实现了 GET 和 POST协议功能不支持客户端使用了 HTTP/2 的某些高级特性服务器只支持 HTTP/1.1,无法处理,返回 501API 接口未完成开发中…

大数据、hadoop、爬虫、spark项目开发设计之基于数据挖掘的交通流量分析研究

大数据、hadoop、爬虫、spark项目开发设计之基于数据挖掘的交通流量分析研究

Pytest项目_day20(log日志)

Log日志优点:记录程序运行信息,方便定位问题python日志模块logging,日志等级如下: DEBUGINFO(正常)WARNINGERROR(报错)示例代码如下:import logging import os.path impo…

elasticsearch中的分词器配置及使用

一、什么是分词器? 在 Elasticsearch(ES)中,分词器(Analyzer) 是处理文本的核心组件,负责将原始文本转换为可搜索的索引词(Term)。它是文本分析过程的核心,直…

《Linux 网络编程二:UDP 与 TCP 的差异、应用及问题应对》

一、UDP 与 TCP 对比表对比项UDPTCP连接方式无需建立连接有连接(三次握手建立,四次挥手断开)传输可靠性尽最大努力交付,可能丢包安全可靠的数据传输机制面向对象面向数据包面向数据流传输模式一对一、一对多传输本质一对一&#x…

uniapp 页面跳转及字符串转义

1. uniapp 页面跳转及字符串转义 1.1. uniapp页面跳转方法 在uniapp中,页面跳转可以通过多种方式进行,包括但不限于路由跳转和页面间事件通信。   一. 路由跳转   在uniapp中,路由跳转是指通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API,包…

Vue中 this.$emit() 方法详解, 帮助子组件向父组件传递事件

this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件1、原理说明:在Vue中,this.$emit()方法用于触发自定义事件。它是Vue实例的一个方法,可以在组件内部使用。使用 this.$emit() 方法,可以向父组件发送自定…

BUCK电路的环路补偿

芯片的COMP脚是用来设计环路补偿用的,它给芯片内部的误差放大器的输出和PWM控制器输入做补偿,如果环路补偿设计得不好,会更容易引起环路的不稳定或振荡,也可能导致输出电压异常。环路补偿涉及三个指标:剪切频率&#x…

Hyperledger Fabric官方中文教程-改进笔记(十六)-策略(policy)

本Fabric中文文档专栏的阅读前言:前言 文章目录什么是策略为什么需要策略策略如何实现访问控制列表 (ACLs)智能合约背书政策修改策略如何在 Fabric 中编写策略Signature policiesImplicitMeta policies例子: 通道配置策略Organizations 部分Application部分Fabric 链…

Flutter性能优化完全指南:构建流畅应用的实用策略

Flutter性能优化完全指南:构建流畅应用的实用策略 探索从UI构建到内存管理的全方位优化技巧,打造如丝般顺滑的Flutter体验 引言 在跨平台开发领域,Flutter以其出色的性能表现脱颖而出。然而,正如任何强大的框架一样,不…

jvm对象内存占用

欢迎访问我的主页: https://heeheeaii.github.io/ 在Java虚拟机(JVM)中,一个对象在内存中的存储布局可以分为三个部分:对象头(Object Header)、实例数据(Instance Data)和对齐填充…

嵌入式系统中mcu寄存器分类划分

目录一、 按行为特性分类二、 按功能角色分类(更宏观的角度)总结与注意事项在32位单片机(尤其是基于ARM Cortex-M系列内核的)中,寄存器的种类可以按照其“行为模式”和“功能”来进行分类。以下是32位单片机&#xff0…

Redis如何高效安全的遍历所有key?

大家好,我是锋哥。今天分享关于【Redis如何高效安全的遍历所有key?】面试题。希望对大家有帮助; Redis如何高效安全的遍历所有key? 超硬核AI学习资料,现在永久免费了! 在 Redis 中,遍历所有的 key 是一个相对昂贵的…

网易云音乐歌曲导出缓存为原始音乐文件。低调,低调。。。

最近买了个榭兰图耳机头,拿到手第一件事当然是煲机了。弄个旧手机做24小时煲机但是不想再装多一个网易云音乐,省得一号多登录会问题。对于软工男最先想到的肯定是在本地直接播放音乐了,正好自己 有淘宝88VIP联合会员,于是琢磨着怎…

从Android到鸿蒙:一场本应无缝的转型-优雅草卓伊凡

从Android到鸿蒙:一场本应无缝的转型-优雅草卓伊凡看到Android开发者询问如何转向鸿蒙,卓伊凡不禁摇头:真正的Android工程师根本不需要“学习”鸿蒙,只需要简单查阅文档即可。近年来,随着鸿蒙系统的不断发展&#xff0…

HTML————更实用于后端宝宝们学习的前端

博主主攻后端,但是毕竟要做网站,我们来学习一点前端的知识,一共有三节,学完就能做一点小小的页面啦;1.1 HTML基础什么是HTML呢,他是超文本标记语言,还记得HTTP是啥不,HTTP是超文本传…

Vue.js 核心机制深度学习笔记

Vue核心机制深度学习笔记 概述 本文档整理自一次深入的 Vue.js 技术讨论,涵盖了响应式系统原理、虚拟 DOM 工作机制、更新策略等核心概念。通过问答形式,旨在帮助开发者彻底理解 Vue.js 的内部运行机制。 目录 SPA 应用与虚拟 DOM虚拟 DOM 生成与 Di…