Vue3 + Element Plus + AntV X6 实现拖拽树组件

Vue3 + Element Plus + AntV X6 实现拖拽树组件

介绍

在本篇文章中，我们将介绍如何使用 Vue 3 和 Element Plus 结合 @antv/x6 实现树形结构的拖拽功能。用户可以将树节点拖拽到图形区域，自动创建相应的节点。我们将会通过简单的示例来一步步讲解实现过程。

代码实现

1. 使用 el-tree 组件

首先，我们需要在 Vue 组件中使用 el-tree 组件。el-tree 组件是 Element Plus 提供的树形结构组件，它支持丰富的功能，包括节点的拖拽、展开、折叠等。

<template><el-tree:data="treeData":props="{ label: 'label', children: 'children' }"ref="deptTreeRef"default-expand-all><template #default="{ node, data }"><divclass="custom-tree-node"@mousedown="startDrag($event, node, data)"><imgv-if="node.level === 1 && data.type === '1'"src="@/assets/system/images/dpp/tsr.png"alt="icon"class="icon-img"/><imgv-if="node.level === 1 && data.type === '2'"src="@/assets/system/images/dpp/tsc.png"alt="icon"class="icon-img"/><span class="treelable">{{ data.label }}</span></div></template></el-tree>
</template>

代码解析
el-tree 组件：用来展示树形数据。我们通过 :data 属性传入树的数据，并通过 :props 设置节点的显示字段。

default-expand-all：使所有节点默认展开。

@mousedown=“startDrag($event, node, data)”：在鼠标按下时触发 startDrag 方法，开始拖拽。

2. 拖拽逻辑
   在 startDrag 方法中，我们会处理节点的拖拽逻辑。首先判断点击的树节点是否是二级节点，如果是，则根据节点的类型创建一个图形节点，并启动拖拽操作。

const startDrag = (e, treeNode, data) => {// 只处理二级节点的拖拽if (treeNode.level === 2) {// 判断是否可以拖拽if (!data.componentType) {return alert("该组件正在开发中！");}// 创建一个新节点并设置数据const node = graph.createNode({shape: "rect",  // 图形的形状width: 180,height: 50,label: data.label,  // 节点的标签data: {  // 节点的附加数据 （所有自定义的数据都可以写里面 ）taskType: data.taskType,componentType: data.componentType,icon: data.icon,},});// 启动拖拽操作dnd.start(node, e);}
};

代码解析
graph.createNode：在图形区域中创建一个新节点，设置节点的形状、宽高、标签等属性。

dnd.start(node, e)：调用 @antv/x6 提供的拖拽接口，启动拖拽操作。

3. 图标和节点数据
   我们根据 data.icon 动态设置节点图标。如果树节点有自定义的图标路径，会显示该图标。如果没有，则显示默认的图标。

<imgv-if="data.icon":src="data.icon"alt="icon"class="icon-img"
/>

通过这种方式，我们能灵活地控制每个节点的显示内容。

总结
通过上述代码，我们展示了如何在 Vue3 中结合 Element Plus 和 AntV X6 实现树形节点的拖拽功能。主要步骤包括：

使用 el-tree 展示树结构。

通过 @mousedown 事件触发拖拽操作。

动态创建图形节点并启动拖拽。

这种方式不仅能提高用户体验，还能为后续更复杂的图形编辑功能奠定基础。希望本文能帮助你更好地理解如何实现树形节点的拖拽和自定义图标展示。