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-virtual-scroller遇到的问题及解决

    使用vue-virtual-scroller遇到的问题及解决

    这篇文章主要介绍了使用vue-virtual-scroller遇到的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue路由对不同界面进行传参及跳转的总结

    vue路由对不同界面进行传参及跳转的总结

    这篇文章主要介绍了vue路由对不同界面进行传参及跳转的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue实现在进行增删改操作后刷新页面

    vue实现在进行增删改操作后刷新页面

    这篇文章主要介绍了vue实现在进行增删改操作后刷新页面,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解Vue.js Class与Style绑定

    详解Vue.js Class与Style绑定

    这篇文章主要为大家介绍了Vue.js Class与Style绑定的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue3中watch的使用详解

    Vue3中watch的使用详解

    这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法,通过多种情况实例代码相结合给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • 详解vue-router 路由元信息

    详解vue-router 路由元信息

    本篇文章主要介绍了vue-router 路由元信息,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • SSM VUE Axios详解

    SSM VUE Axios详解

    Axios是在前端开发中常用的一个发送 HTTP 请求的库,用过的都知道,篇文章主要给大家介绍了关于vue的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue项目打包部署跨域的实现步骤

    vue项目打包部署跨域的实现步骤

    在前端 Vue 项目打包后,如果需要访问另一个域名下的接口,由于浏览器的同源策略限制,会出现跨域问题,本文就介绍一下vue项目打包部署跨域的实现步骤,感兴趣的可以了解一下
    2023-05-05
  • vue实现图片按比例缩放问题操作

    vue实现图片按比例缩放问题操作

    这篇文章主要介绍了vue实现图片按比例缩放问题操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3 axios 实现自动化api配置详解

    vue3 axios 实现自动化api配置详解

    这篇文章主要为大家介绍了vue3 axios 实现自动化api配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论