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();
相关推荐
Q_970956392 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员17 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘22 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的24 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im30 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 小时前
vue中添加原生右键菜单
javascript·vue.js
旷世奇才李先生1 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
Mintopia3 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖3 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript