element-ui - elementui，el-tree拖拽如何限制层级？

Question

项目中需要用到el-tree做拖拽功能，但是层级有限制要求，例如：不能超过6级，但是allow-drop提供的方法参数感觉有问题，参照的层级对不上，导致计算有问题。

Answer 1

在 Element UI 的 el-tree 组件中，实现拖拽功能并限制层级确实需要一些额外的逻辑处理，因为 allow-drop 回调函数本身并不直接提供当前节点和目标节点的层级信息。你需要通过遍历节点路径或使用组件的API来获取这些信息。

以下是一个基本示例，展示了如何在 allow-drop 回调中限制拖拽的层级：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    draggable
    node-key="id"
    :allow-drop="handleAllowDrop"
    @node-drag-end="handleDragEnd"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        // 你的树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      maxLevel: 6 // 最大层级限制
    };
  },
  methods: {
    // 计算节点的层级
    getNodeLevel(node) {
      let level = 0;
      while (node.parent) {
        node = node.parent;
        level++;
      }
      return level;
    },
    handleAllowDrop(draggingNode, dropNode, type, ev) {
      if (!dropNode) return false; // 不允许拖拽到空白处

      // 计算拖拽节点和目标节点的层级
      const draggingLevel = this.getNodeLevel(draggingNode);
      const dropLevel = this.getNodeLevel(dropNode);

      // 检查拖拽后是否超过最大层级限制
      const newLevel = dropLevel + 1; // 因为拖拽到dropNode下，层级+1
      if (newLevel > this.maxLevel) {
        return false; // 超过层级限制，不允许拖拽
      }

      // 你可以在这里添加更多逻辑，比如检查节点类型等
      return true; // 允许拖拽
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // 拖拽结束后的处理逻辑
      console.log('draggingNode:', draggingNode);
      console.log('dropNode:', dropNode);
      console.log('dropType:', dropType);
    }
  }
};
</script>

在这个例子中，getNodeLevel 方法通过遍历节点的 parent 属性来计算节点的层级。在 handleAllowDrop 方法中，我们首先计算拖拽节点和目标节点的层级，然后检查如果拖拽后的新层级超过了设定的最大层级限制 maxLevel，则不允许拖拽。

请注意，这个解决方案假设你能够访问到每个节点的 parent 属性。在 Element UI 的 el-tree 组件中，节点数据通常不包含 parent 属性，除非你在数据预处理时手动添加了它，或者通过其他方式（如使用组件的API）来获取节点路径。如果 parent 属性不可用，你可能需要维护一个额外的数据结构来跟踪每个节点的层级或路径。

此外，由于 el-tree 的API和内部实现可能会随着Element UI版本的更新而变化，建议查阅最新的官方文档以获取准确的信息。