前端层级拖拽文件夹组件（Vue3+elementPlus的Tree组件实现）

<template> <div class="drag_folder_box"> <el-tree draggable node-key="uid" :default-expanded-keys="defaultExpanded" :indent="indentLeft" :data="interiorList" :props="treeOption" :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"> <template v-if="data.type === 'dir'">{{ data.label }}</template> <template v-else>{{ data.label }}({{ data.creator }})</template> </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/billboard' // #region 组件逻辑 interface IProps { boardId?: number list?: Array<IGetBillboardListTreeItem> } const props = withDefaults(defineProps<IProps>(), { boardId: 0, list: () => [] }) const emit = defineEmits(['edit', 'delete', 'switch', 'change']) const treeOption = { class: (data: IGetBillboardListTreeItem, node: Node) => { if (data.id === props.boardId && data.type === 'dashboard') { return 'on_tree_item' } else if (data.type === 'dir') { return 'folder' } else { return 'dashboard' } } } const interiorList = ref<Array<IGetBillboardListTreeItem>>([]) const defaultExpanded = ref<Array<string>>([]) const indentLeft = ref(10) // #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 === 'dashboard') { 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.boardId) return emit('switch', data) } // #endregion // #region 生命周期 onMounted(() => { interiorList.value = props?.list || [] if (props.boardId) { defaultExpanded.value = [] interiorList.value.forEach((item) => { if (item.children) { if (item.children.find((item2) => item2.id === props.boardId) || item.children.length === 0) { if (!defaultExpanded.value.includes(item.uid)) { defaultExpanded.value.push(item.uid) } } } }) } }) // #endregion </script> <style lang="scss" scoped> .drag_folder_box { width: 100%; height: 100%; background-color: #fff; // 蓝色的线 &:deep(.el-tree__drop-indicator) { height: 2px; left: 0px !important; } // 重置样式 &:deep(.el-tree-node:focus > .el-tree-node__content) { background-color: #e4f2ff !important; } &:deep(.el-tree-node__content) { width: 100%; height: auto; border-bottom: 1px solid transparent; box-sizing: border-box !important; &:hover { background-color: #e4f2ff !important; } &:focus { background-color: #e4f2ff !important; } } .tree_item { width: calc(100% - 20px); display: flex; align-items: center; height: 36px; line-height: 36px; &:hover { background-color: #e4f2ff; color: #3d90ff; .item_operate { opacity: 1; } } .item_title { width: calc(100% - 48px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item_operate { flex-shrink: 0; opacity: 0; width: 48px; height: 100%; display: flex; align-items: center; justify-content: space-around; .operate_item { width: 24px; height: 100%; display: flex; align-items: center; justify-content: space-around; } } } } </style> <!-- Tree的样式 --> <style lang="scss"> .folder { font-weight: bold; color: #000000; } .dashboard { font-weight: normal; color: #606266; } .on_tree_item { background-color: #e4f2ff !important; color: #3d90ff !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); } } </style>