elmentui树形表格使用Sortable拖拽展开行时拖拽bug

1、使用elemntui的el-table使用Sortable进行拖拽,如下

const el = this.$el.querySelector('.el-table__body-wrapper tbody')
Sortable.create(el, {onEnd: (event) => {const { oldIndex, newIndex } = event//拿到更新前后的下标即可完成数据的更新}
})

2、但是我这个需求有点特俗,这个table是一个展开行表格,如下:
在这里插入图片描述3、每次当表格展开的时候,因为展开的数据和要拖拽表格数据同属于拖拽元素,所以每次都可以展开内容,这个是不允许的,所以我需要在展开的时候禁止拖拽
4、解决方式:先把这个拖拽对象赋值给vue的一个属性,然后在展开的时候把这个拖拽对象销毁,所有的展开行都关闭的时候再生成一下拖拽对象


// 假设 sortable 是 Sortable.create 返回的对象
var sortable = Sortable.create(/* ... */);// 关闭整个列表的拖拽功能
sortable.destroy();

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

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

相关文章

分析ARP解析过程

1、实验环境 主机A和主机B连接到交换机,并与一台路由器互连,如图7.17所示,路由器充当网关。 图7.17 实验案例一示意图 2、需求描述 查看 ARP 相关信息,熟悉在PC 和 Cisco 设备上的常用命令,设置主机A和主机B为同一个网段网关设置为路由接…

2024-14.python前端+Django

第四篇 web前端 第1章 、Web的基本概念 前端基础总共分为三部分:html、css和js。 1.3、HTTP协议 1.3.1 、http协议简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于万维网(WWW:World Wide Web &am…

故障转移-redis

4.4.故障转移 集群初识状态是这样的: 其中7001、7002、7003都是master,我们计划让7002宕机。 4.4.1.自动故障转移 当集群中有一个master宕机会发生什么呢? 直接停止一个redis实例,例如7002: redis-cli -p 7002 sh…

LVM和磁盘配额

目录 1、LVM (1)LVM机制 (2)LVM的管理命令 (3)创建并使用LVM (4)扩容 2、磁盘配额 (1)什么叫磁盘配额 (2)磁盘配额的条件和特点…

OpenHarmony、HarmonyOS和Harmony NEXT 《我们不一样》

1. OpenHarmony 定义与地位:OpenHarmony是鸿蒙系统的底层内核系统,集成了Linux内核和LiteOS,为各种设备提供统一的操作系统解决方案。 开源与商用:OpenHarmony是一个开源项目,允许开发者自由访问和使用其源代码&#…

零代码编程:用kimichat将mp4视频批量转为mp3音频

一个文件夹里面有多个子文件夹,里面的视频需要转成为mp3音频格式。可以在kimichat中键入提示词: 你是一个Python编程专家,要完成一个Python脚本的编写任务,具体步骤如下: 打开文件夹:D:\CHATGPT For TikT…

HarmonyOS4-数据持久化

轻量级preferences: 关系型数据库: 增删改: 查询语句: 具体详情代码可参与源码: 黑马大佬写的。 harmonyos-lessons: 黑马程序员B站HarmonyOS课程的基础篇代码部分

项目中,如何写 readme.md 文件 | 写项目总结

tips:注意写 1. readme文件:①项目文档(项目需求和设计文档、项目系统架构和技术文档、接口文档)、②项目结构、③启动项目。具体结构见下文。 2. 项目总结:技术栈、描述、主要工作!!需求及功…

【React】Ant Design自定义主题风格及主题切换

Ant Design 的自定义主题,对于刚入手的时候感觉真是一脸蒙圈,那今天给它梳理倒腾下; 1、自定义主题要点 整体样式变化,主要两个部分: 1.1、Design Token https://ant.design/docs/react/customize-theme-cn#theme 官…

Pytorch搭建GoogleNet神经网络

一、创建卷积模板文件 因为每次使用卷积层都需要调用Con2d和relu激活函数,每次都调用非常麻烦,就将他们打包在一起写成一个类。 in_channels:输入矩阵深度作为参数输入 out_channels: 输出矩阵深度作为参数输入 经过卷积层和relu激活函数…

计算机网络----第十二天

交换机端口安全技术和链路聚合技术 1、端口隔离技术: 用于在同vlan内部隔离用户; 同一隔离组端口不能通讯,不同隔离组端口可以通讯; 2、链路聚合技术: 含义:把连接到同一台交换机的多个物理端口捆绑为一个逻辑端口…

KNIME 国际化支持投票

你的投票也许能让 KNIME 中文化快一点点。 i18n 是个很搞笑的单词,它是英文 internationalization 国际化的缩写。18 指的是首字母i和末字母n中间有18个字母。另外还有什么 K8s 也是一样,中间省去了8个字母 ... 真是懒的可以。指北君还想起一个类似的笑话…