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();
相关推荐
Van_captain4 分钟前
rn_for_openharmony常用组件_Chip纸片
javascript·开源·harmonyos
奋斗吧程序媛16 分钟前
vue3 Study(1)
前端·javascript·vue.js
QQ129584550420 分钟前
ThingsBoard - APP首页修改为手工选择组织
前端·javascript·物联网·iot
whyfail21 分钟前
前端数据存储新选择:IndexedDB与Dexie.js技术指南
前端·javascript·数据库
椰果uu22 分钟前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue
超绝大帅哥41 分钟前
为什么回调函数不是一种好的异步编程方式
javascript
jump_jump1 小时前
Ripple:一个现代的响应式 UI 框架
前端·javascript·前端框架
神秘的猪头1 小时前
🎨 CSS 这种“烂大街”的技术,怎么在 React 和 Vue 里玩出花来?—— 模块化 CSS 深度避坑指南
css·vue.js·react.js
夏天想1 小时前
element-plus的输入数字组件el-input-number 显示了 加减按钮(+ -) 和 小三角箭头(上下箭头),怎么去掉+,-或者箭头
前端·javascript·vue.js
进击的野人1 小时前
Vue 3 响应式数据解构:toRef 与 toRefs 的深度解析
前端·vue.js·前端框架