element plus tree拖動節(jié)點交換位置和改變層級問題(解決方案)
圖層list里有各種組件，用element plus的tree來渲染，可以把圖片等組件到面板里，面板是容器，非容器組件，比如圖片、文本等，就不能讓其他組件拖進(jìn)來。
主要在于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'
}
}最終效果：
到此這篇關(guān)于element plus tree拖動節(jié)點交換位置和改變層級的文章就介紹到這了,更多相關(guān)element plus tree拖動節(jié)點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中實現(xiàn)展示與隱藏側(cè)邊欄功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題
這篇文章主要介紹了vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue+element-ui實現(xiàn)主題切換功能，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
Vue實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何溧陽Vue實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
這篇文章主要介紹了 vue中v-for 循環(huán)對象中的屬性，文章圍繞v-for 循環(huán)對象的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要介紹了vue 實現(xiàn)用戶登錄方式的切換功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
Vue使用codemirror實現(xiàn)一個可插入自定義標(biāo)簽的textarea
這篇文章主要為大家詳細(xì)介紹了Vue如何使用codemirror實現(xiàn)一個可插入自定義標(biāo)簽的textarea,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要介紹了使用el-form之表單校驗自動定位到報錯位置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05