element plus tree拖动节点交换位置和改变层级问题(解决方案)

 更新时间:2024年04月27日 17:02:33   作者:粉末的沉淀  
图层list里有各种组件,用element plus的tree来渲染,可以把图片等组件到面板里,面板是容器,非容器组件,比如图片、文本等,就不能让其他组件拖进来,这篇文章主要介绍了element plus tree拖动节点交换位置和改变层级问题(解决方案),需要的朋友可以参考下

图层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方法

<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'
				}
			}

最终效果:

到此这篇关于element plus tree拖动节点交换位置和改变层级的文章就介绍到这了,更多相关element plus tree拖动节点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+element UI实现树形表格带复选框的示例代码

    vue+element UI实现树形表格带复选框的示例代码

    这篇文章主要介绍了vue+element UI实现树形表格带复选框的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue如何监听el-select选择值的变化

    vue如何监听el-select选择值的变化

    这篇文章主要介绍了vue如何监听el-select选择值的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue做网页开场视频的实例代码

    vue做网页开场视频的实例代码

    这篇文章主要介绍了vue做网页开场视频的实例代码,需要的朋友可以参考下
    2017-10-10
  • vue实现微信获取用户信息的方法

    vue实现微信获取用户信息的方法

    这篇文章主要介绍了vue实现微信获取用户信息的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue3+Element采用递归调用封装导航栏实现

    vue3+Element采用递归调用封装导航栏实现

    本文主要介绍了vue3+Element采用递归调用封装导航栏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue快捷键与基础指令详解

    vue快捷键与基础指令详解

    这篇文章主要介绍了vue快捷键与基础指令详解,需要的朋友可以参考下
    2017-06-06
  • 详解vue-cli项目中用json-sever搭建mock服务器

    详解vue-cli项目中用json-sever搭建mock服务器

    这篇文章主要介绍了详解vue-cli项目中用json-sever搭建mock服务器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 前端element-ui两层dialog嵌套遮罩层消失的问题解决办法

    前端element-ui两层dialog嵌套遮罩层消失的问题解决办法

    最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,这篇文章主要给大家介绍了关于前端element-ui两层dialog嵌套遮罩层消失的问题解决办法,需要的朋友可以参考下
    2024-08-08
  • Vue2.x 的双向绑定原理及实现

    Vue2.x 的双向绑定原理及实现

    这篇文章主要介绍了Vue2.x 的双向绑定原理,Vue 是利用的 Object.defineProperty() 方法进行的数据劫持,利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • 浅谈在Vue-cli里基于axios封装复用请求

    浅谈在Vue-cli里基于axios封装复用请求

    这篇文章主要介绍了浅谈在Vue-cli里基于axios封装复用请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论