快捷導(dǎo)航

element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案)

更新時間：2024年04月27日 17:02:33 作者：粉末的沉淀

圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進來,這篇文章主要介紹了element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案),需要的朋友可以參考下

圖層list里有各種組件，用element plus的tree來渲染，可以把圖片等組件到面板里，面板是容器，非容器組件，比如圖片、文本等，就不能讓其他組件拖進來。

主要在于allow-drop屬性的回調(diào)函數(shù)編寫，要理清楚思路，什么時候allow-drop返回true，什么時候返回false。

allow-drop回調(diào)函數(shù)參數(shù)里的type，有三個值：before、after、inner，這是解決問題的關(guān)鍵點。

比如把A節(jié)點向B節(jié)點拖動，before表示把A拖到B的前面，after表示把A拖到B的后面，inner表示把A拖到B里面去。

對于面板容器來說，這三種位置都是允許drop的，allow-drop的返回值一定是true；

對于其他組件來說，只有before和after是允許的，所以當(dāng)type不等于inner的時候，allow-drop的返回值才是true，否則是false。

html代碼：

關(guān)鍵點：draggable為true，設(shè)置allow-drop方法

<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方法：

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

最終效果：