el-tree只能同级拖拽排序

<el-tree
  :data="treeData"
  node-key="id"
  draggable
  :allow-drop="allowDrop"
  @node-drop="handleDrop"
> 
</el-tree>

主要是用到了allow-drop这个方法,然后去判断元素被放置的位置是否和当前元素的父级id一致

https://element.eleme.cn/#/zh-CN/component/tree

// tree拖拽成功完成时触发的事件
handleDrop(draggingNode, dropNode, dropType, ev) {
  console.log(draggingNode, dropNode, dropType, ev);
},

// 拖拽时判定目标节点能否被放置
// 'prev'、'inner' 和 'next',前、插入、后
allowDrop(draggingNode, dropNode, type) {
  if (draggingNode.data.level === dropNode.data.level) {
    if (draggingNode.data.parentId === dropNode.data.parentId) {
      return type === "prev" || type === "next";
    } else {
      return false;
    }
  } else {
    // 不同级进行处理
    return false;
  }
},
posted @   槑孒  阅读(954)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示