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 @ 2022-08-25 15:13  槑孒  阅读(663)  评论(0编辑  收藏  举报