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();
相关推荐
boooooooom7 小时前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
wxin_VXbishe7 小时前
C#(asp.net)学员竞赛信息管理系统-计算机毕业设计源码28790
java·vue.js·spring boot·spring·django·c#·php
不会敲代码17 小时前
解密JavaScript内存机制:从执行上下文到闭包的全景解析
javascript
NEXT067 小时前
React Hooks 进阶:useState与useEffect的深度理解
前端·javascript·react.js
哈里谢顿7 小时前
Vue 3 入门完全指南:从零构建你的第一个响应式应用
vue.js
踢足球09298 小时前
寒假打卡:2026-2-7
java·开发语言·javascript
楚轩努力变强8 小时前
iOS 自动化环境配置指南 (Appium + WebDriverAgent)
javascript·学习·macos·ios·appium·自动化
John_ToDebug8 小时前
引擎深处的漫游者:构建浏览器JavaScript引擎的哲学与技艺
javascript·chrome·js
程序猿阿伟9 小时前
《TypeScript中Protobuf到运行时类型安全的转换指南》
javascript·安全·typescript
三十_A9 小时前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频