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();
相关推荐
222you1 分钟前
vue目录文件夹的作用
前端·javascript·vue.js
qq_12498707535 分钟前
基于Spring Boot的阳光餐盘点餐系统(源码+论文+部署+安装)
java·vue.js·spring boot·后端·毕业设计
yanghuashuiyue12 分钟前
TypeScript是JavaScript超集-百度AI灵魂拷问
前端·javascript·typescript
克喵的水银蛇17 分钟前
Flutter 通用下拉选择器:DropdownSelector 一键实现自定义下拉交互
开发语言·javascript·ecmascript
木易 士心18 分钟前
深入理解 TypeScript 声明文件(.d.ts):类型系统的桥梁
前端·javascript·typescript
2401_8604947019 分钟前
在React Native鸿蒙跨平台开发中实现一个基数排序算法,如何进行找到最大数:遍历数组找到最大值呢?
javascript·算法·react native·react.js·排序算法·harmonyos
Watermelo61721 分钟前
如何优雅地导出 VS Code 项目目录结构
前端·javascript·vue.js·vscode·算法·性能优化·node.js
艾小码22 分钟前
前端性能加速器:Vue Router懒加载与组件分包的极致优化
前端·javascript·vue.js
Moment23 分钟前
使用 Tiptap 编写一个富文本编辑器为什么对很多人来说很难 🤔🤔🤔
前端·javascript·github
汝生淮南吾在北5 小时前
SpringBoot+Vue饭店点餐管理系统
java·vue.js·spring boot·毕业设计·毕设