如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

<template>
	<div class="drag_folder_box">
		<el-tree
			draggable
			node-key="uid"
			:default-expanded-keys="defaultExpanded"
			:data="interiorList"
			:allow-drop="handleDragBehavior"
			:allow-drag="handleAllowDrag"
			@node-drag-start="handleDragStart"
			@node-drag-enter="handleDragEnter"
			@node-drag-leave="handleDragLeave"
			@node-drag-over="handleDragOver"
			@node-drag-end="handleDragEnd"
			@node-drop="handleDrop"
			@node-click="handleSwitchBillboard"
		>
			<template #default="{ data }">
				<div class="tree_item">
					<div class="item_title">{{ data.label }}</div>
					<div class="item_operate">
						<div class="operate_item" title="编辑" @click.stop="editBillboard(data)">
							<el-icon :size="16">
								<ele-Edit />
							</el-icon>
						</div>
						<div class="operate_item" title="删除" @click.stop="deleteBillboard(data)">
							<el-icon :size="16">
								<ele-Delete />
							</el-icon>
						</div>
					</div>
				</div>
			</template>
		</el-tree>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { AllowDropType, NodeDropType } from 'element-plus/es/components/tree/src/tree.type'
import type { IGetBillboardListTreeItem } from '@/types/data-billboard'
// #region 组件逻辑
interface IProps {
	list?: Array<IGetBillboardListTreeItem>
}
const props = withDefaults(defineProps<IProps>(), {
	list: () => []
})
const emit = defineEmits(['edit', 'delete', 'switch', 'change'])
const interiorList = ref<Array<IGetBillboardListTreeItem>>([])
// #endregion
// #region 拖拽逻辑
watch(
	() => props.list,
	(newValue) => {
		interiorList.value = newValue
	},
	{
		deep: true,
		immediate: true
	}
)
// 节点开始拖拽时
const handleDragStart = (node: Node, ev: DragEvents) => {}
// 拖拽进入其他节点时
const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {}
// 拖拽离开某个节点时
const handleDragLeave = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {}
// 在拖拽节点时
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {}
// 拖拽结束时
const handleDragEnd = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {}
// 拖拽成功时
const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
	emit('change', interiorList.value)
}
// 是否允许拖拽
const handleAllowDrag = (draggingNode: Node) => {
	return true
}
// 拖拽行为判断
const handleDragBehavior = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
	// 如果选中的节点不是看板 则不允许拖动到内部，只能是 'prev' 或 'next'
	if (dropNode.data.type === 'billboard') {
		return type !== 'inner'
	}
	return true
}
// 编辑看板/文件夹
const editBillboard = (data: IGetBillboardListTreeItem) => {
	emit('edit', data)
}
// 删除看板/文件夹
const deleteBillboard = (data: IGetBillboardListTreeItem) => {
	emit('delete', data)
}
// 选择看板
const handleSwitchBillboard = (data: IGetBillboardListTreeItem) => {
	if (data.type === 'dir') return
	if (data.id === props.billboardId) return
	emit('switch', data)
}
// #endregion
// #region 生命周期
onMounted(() => {
	interiorList.value = props?.list || []
})
// #endregion
</script>

.el-tree-node__expand-icon {
	line-height: 36px !important;
	height: 36px !important;
	padding: 0px 2px !important;
}

.el-tree-node__expand-icon {
	line-height: 36px !important;
	height: 36px !important;
	padding: 0px 2px !important;
}
.el-tree-node__expand-icon.expanded {
	transform: rotate(0deg);
	& svg {
		transform: rotate(90deg);
	}
}

const formatBillboardList = (list: Array<IBillboardTreeItem>, pid: number): Array<IBillboardTreeItem> => {
	return list.map((item, index) => {
		// 唯一ID
		const uid = `${item.type}_${item.id}`
		// 父ID
		const parentId = pid === 0 ? item.id : pid
		// 子层
		const children = Array.isArray(item.children) ? formatBillboardList(item.children, item.id) : []
		return {
			...item,
			uid,
			order: index,
			parentId,
			children
		}
	})
}
const list = formatBillboardList(res.data, 0)

const handleDragBehavior = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
	// 如果选中的节点不是看板 则不允许拖动到内部，只能是 'prev' 或 'next'
	if (dropNode.data.type === 'billboard') {
		return type !== 'inner'
	}
	return true
}

const treeOption = {
	class: (data: IGetBillboardListTreeItem, node: Node) => {
		if (data.id === props.billboardId && data.type === 'billboard') {
			return 'on_tree_item'
		} else if (data.type === 'dir') {
			return 'folder'
		} else {
			return 'billboard'
		}
	}
}

<el-tree :indent="10"></el-tree>

.drag_folder_box {
  &:deep(.el-tree-node__content) {
		width: 100%;
		height: auto;
		border-bottom: 1px solid #c1c1c1;
		&:hover {
			background-color: #e4f2ff !important;
		}
		&:focus {
			background-color: #e4f2ff !important;
		}
	}
}