ElementUI组件库踩坑记录之el-tree

ElementUI组件库踩坑记录

el-tree

拖拽功能的实现。
目前是想实现实现一个作为目录的树，可以拖拽组件到可操作区域，同时目录也可以移动。

步骤1拖拽没有问题，但路线为2时同时会有一个移入改文件夹的动作执行

实现思路

1、本来想通过node-drag-end绑定的方法的event.target确定最终拖动到的位置，但是发现target绑定的是被拖拽的元素，后面就根据x,y确定定位阻止原有的移动目录方法（移动目录时有调用api）。
2、但是由于el-tree原有的特性，拖动之后目录还是被拖过去了，失败的几个方法就不具体说了，最终实现
allow-drop绑定的方法直接return false，默认不允许放置，同时全局存储dropNode, dropType，再在node-drag-end方法中替换两个值，之后按照原有的方法继续筛选执行。
3、最后就是鼠标样式了，因为不允许放置时样式默认是禁用的，修改css样式还是无法将禁用的标识去掉，最后查看源码发现修改event

// @node-drag-over="handleDragOver"
handleDragOver(draggingNode, dropNode, event) {
  // 判断拖拽时是否允许放置
  event.dataTransfer.dropEffect = dropNode.data.isSpace ? 'move' : 'none';
}

这样就大功告成啦。