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();
相关推荐
用户2986985301411 分钟前
在 React 中使用 JavaScript 将 Markdown 转换为 PDF
javascript·react.js·markdown
Hilaku43 分钟前
为什么我在团队里禁止使用 axios?
前端·javascript·程序员
一只游鱼1 小时前
我用原生 JS 做了一个「会呼吸」的博客:Canvas 水境 + 合成音效 + 会破裂的留言气泡(vibe coding)
javascript·agent·canvas·github pages
只睡四小时1 小时前
Local-First 数据契约:一张表装下 4 类数据
前端·javascript·架构设计·local-first·数据契约
溪语流沙2 小时前
【Web全栈进阶】文件上传与图片展示:早报站的第一张图片
前端·vue.js·python·fastapi
云浪12 小时前
Go 并发实战:从零实现一个高并发安全的任务调度器
javascript·后端·go
OpsEye21 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿21 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
流烟默1 天前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
Hilaku1 天前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员