基于vue+element 实现两个树形tree之间的跨树拖拽

最新推荐文章于 2025-04-17 10:44:22 发布

kareCat

最新推荐文章于 2025-04-17 10:44:22 发布

阅读量5.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： element vue 文章标签： vue js elementui

本文链接：https://blog.youkuaiyun.com/kareCat/article/details/115864694

<el-tree
  :data="data"
  node-key="id"
  default-expand-all
  @node-drag-start="handleDragStart"
  @node-drag-enter="handleDragEnter"
  @node-drag-leave="handleDragLeave"
  @node-drag-over="handleDragOver"
  @node-drag-end="handleDragEnd"
  @node-drop="handleDrop"
  draggable
  :allow-drop="allowDrop"
  :allow-drag="allowDrag">
</el-tree>

这是element中可以用于自身拖拽的组件，今天要完成的是跨树拖拽，大概思路就是节点的复制
下面先附上代码

<template>
  <div class="tree-drag">
    <el-tree :data="treeData1" ref="treeIn" class="tree" node-key="id" default-expand-all draggable :allow-drag="returnTrue" @node-drag-start="handleDragstart" @node-drag-end="handleDragend"></el-tree>
    <el-tree :data="treeData2" ref="treeOut" class="tree" node-key