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();
相关推荐
可乐鸡翅yeah_17 分钟前
新手梳理:HLS 线上问题,哪些该提给 CDN,哪些该找后端切片服务
开发语言·前端·javascript·vue.js·网络协议·http·m3u8在线
Q264336502321 分钟前
【有源码】基于SpringBoot+Vue的博物馆展览与服务一体化平台-java博物馆数字化展品展示与交互平台设计
java·vue.js·spring boot·spring·毕业设计·javaweb·课程设计
এ慕ོ冬℘゜1 小时前
es6基础
前端·javascript·es6
ym hyd 1111 小时前
汽车零部件缺陷管理系统源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·汽车·毕设
可乐鸡翅yeah_2 小时前
hls.js 缓冲区参数 maxBufferLength、maxBufferSize 通俗讲解与业务调参
开发语言·javascript·ios·音视频·safari·m3u8
paopaokaka_luck2 小时前
高校社团管理(AI辅助任务分配、协同过滤算法推荐、ECharts数据可视化、活动参与闭环、校园交流与反馈、器材借还管理)
java·前端·javascript·spring boot·数据分析·echarts
vx_Biye_Design2 小时前
springboot小区管理系统68491-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·课程设计·express
500842 小时前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos
薛一半2 小时前
React-Redux三重优化实战揭秘
javascript·vue.js·react.js
专业程序开发源2 小时前
springboot外卖系统94294-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·php·课程设计