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

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

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

2、但是我这个需求有点特俗,这个table是一个展开行表格,如下:
3、每次当表格展开的时候,因为展开的数据和要拖拽表格数据同属于拖拽元素,所以每次都可以展开内容,这个是不允许的,所以我需要在展开的时候禁止拖拽

4、解决方式:先把这个拖拽对象赋值给vue的一个属性,然后在展开的时候把这个拖拽对象销毁,所有的展开行都关闭的时候再生成一下拖拽对象

javascript 复制代码
// 假设 sortable 是 Sortable.create 返回的对象
var sortable = Sortable.create(/* ... */);

// 关闭整个列表的拖拽功能
sortable.destroy();
相关推荐
脾气有点小暴2 小时前
uniapp开发APP 内嵌外部 HTTPS 链接的实现方案
vue.js·uni-app
CodeCraft Studio2 小时前
JavaScript图表库 DHTMLX Diagram 6.1 重磅发布:全新PERT模式上线,项目可视化能力再升级!
开发语言·javascript·ecmascript·dhtmlx·图表开发·diagram·javascript图表库
shuaijie05182 小时前
当表格数据量过大的时候,如何使用不分页进行展示
javascript·vue.js·ecmascript
JosieBook3 小时前
【Vue】03 Vue技术——Vue.js 入门学习笔记:Hello World 案例详解
vue.js·笔记·学习
How_doyou_do3 小时前
常见的设计模式
前端·javascript·设计模式
Gomiko3 小时前
JavaScript DOM 原生部分(五):事件绑定
开发语言·前端·javascript
巴拉巴拉~~3 小时前
Flutter 通用下拉选择组件 CommonDropdown:单选 + 搜索 + 自定义样式
开发语言·javascript·ecmascript
Можно4 小时前
深入理解 JavaScript 函数:分类、特性与实战应用
开发语言·javascript
lionliu05194 小时前
JavaScript 变量声明最佳实践
前端·javascript·vue.js
计算机毕设VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue酒店管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计