Element-Plus拖拽树组件：如何解决拖拽超出区域和图标显示不一致的问题？-js教程-PHP中文网

Element-Plus拖拽树组件：如何解决拖拽超出区域和图标显示不一致的问题？

碧海醫心

发布： 2025-02-20 10:30:28

原创

836人浏览过

element-plus拖拽树组件：如何解决拖拽超出区域和图标显示不一致的问题？

优化Element Plus拖拽树组件

本文将探讨如何解决Element Plus拖拽树组件中常见的两个问题：拖拽超出树区域仍触发事件以及禁止拖拽节点的图标显示不一致。

问题一：拖拽超出树区域仍触发事件

为了防止拖拽操作超出树组件区域时仍然触发事件，建议使用更精细的事件控制，例如：

<code class="javascript">// 鼠标移入树区域
onmouseenter(e) {
  //  更精准的判断是否在树组件内
  if (this.$el.contains(e.target)) {
    e.preventDefault();
    e.stopPropagation();
  }
},

// 鼠标移出树区域
onmouseleave(e) {
  // 更精准的判断是否在树组件内
  if (!this.$el.contains(e.target)) {
    e.preventDefault();
    e.stopPropagation();
  }
}</code>

登录后复制

通过 this.$el.contains(e.target) 判断鼠标事件目标元素是否在树组件内部，避免了不必要的事件触发。

问题二：禁止拖拽节点图标显示不一致

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

图标显示不一致通常是由于 allowDrop 属性设置不正确或不完整导致的。确保以下几点：

正确设置 allowDrop 属性: 对于禁止拖拽的节点，必须将 allowDrop 属性设置为 false。
递归设置 allowDrop 属性: 务必在所有子节点上都正确设置 allowDrop 属性。如果父节点允许拖拽，但子节点禁止拖拽，则可能导致图标显示不一致。建议在数据处理或组件渲染过程中递归设置该属性，确保所有节点的属性一致。