element plus：tree拖动节点交换位置和改变层级

粉末的沉淀2024-04-27 19:58

图层list里有各种组件，用element plus的tree来渲染，可以把图片等组件到面板里，面板是容器，非容器组件，比如图片、文本等，就不能让其他组件拖进来。

主要在于allow-drop属性的回调函数编写，要理清楚思路，什么时候allow-drop返回true，什么时候返回false。

allow-drop回调函数参数里的type，有三个值：before、after、inner，这是解决问题的关键点。

比如把A节点向B节点拖动，before表示把A拖到B的前面，after表示把A拖到B的后面，inner表示把A拖到B里面去。

对于面板容器来说，这三种位置都是允许drop的，allow-drop的返回值一定是true；

对于其他组件来说，只有before和after是允许的，所以当type不等于inner的时候，allow-drop的返回值才是true，否则是false。

html代码：

关键点：draggable为true，设置allow-drop方法

html 复制代码

<el-tree ref="treeRef" style="width: 200px; margin-top: 10px" :data="designerStore.cacheComponents"
						draggable node-key="id" highlight-current v-if="flag"
						:current-node-key="designerStore.currentCpt ? designerStore.currentCpt.id : null"
						:allow-drop="allowDrop" :props="{ label: 'cptTitle', id: 'id', children: 'children' }"
						empty-text="无图层">
						<template #default="{ node, data }">
							<span class="custom-tree-node" @dblclick.stop="editCateName(data, node)"
								@mousedown="showConfigBar(data)" @contextmenu.prevent="showContextMenu">
								<img class="selectedItem-icon"
									:src="require('@/assets/icon/components/' + getIcon(data) + '.svg')" />
								<el-input v-model="data.cptTitle" v-if="isEdit === data.id" :ref="data.id"
									placeholder="请输入" @blur="editSave()" @keyup.enter="editSave()" size="small" />
								<span v-else>{{ data.cptTitle }}</span>
							</span>
						</template>
					</el-tree>

allow-drop方法：

javascript 复制代码

allowDrop(draggingNode, dropNode, type) {
				if (dropNode.data.cptKey === 'cpt-panel') {
					return true
				} else {
					return type !== 'inner'
				}
			}

最终效果：