前端三级菜单进行拖拽，最大节点级数不大于三的解决档案

//vue-template,使用elementui的Tree树形控件

   <el-tree

      :data="menus"

      :props="defaultProps"

      @node-click="handleNodeClick"

      :expand-on-click-node="false"

      :default-expanded-keys="expandedKey"

      show-checkbox

      node-key="catId"

      draggable

      :allow-drop="allowDrop"

    >

      <span class="custom-tree-node" slot-scope="{ node, data }">

        <span>{{ node.label }}</span>

        <span>

          <el-button

            v-if="node.level <= 2"

            type="text"

            size="mini"

            @click="() => append(data)"

          >

            添加

          </el-button>

          <el-button type="text" size="mini" @click="() => edit(data)">

            编辑

          </el-button>

          <el-button

            v-if="node.childNodes.length == 0"

            type="text"

            size="mini"

            @click="() => remove(node, data)"

          >

            删除

          </el-button>

        </span>

      </span></el-tree

 

//data:

maxLevel: 0,

 

//method:

// 判断目标节点能否拖拽

    allowDrop(draggingNode, dropNode, type) {

      this.maxLevel = 0;

      if (draggingNode.childNodes.length == 0) {

        //没有子节点，判断将当前节点放入目标节点之后的最大深度，<=3则允许

        if (dropNode.level + 1 <= 3) {

          return true;

        }

      } else {

        // 当前被拖拽节点有子节点，递归出被拖拽节点的最大深度

        this.getMaxLevel(draggingNode);

        //如果被拖拽节点的最大深度加上目标节点的level小于等于3,则允许放入

        if (this.maxLevel + dropNode.level < 5) {

          return true;

        }

      }

    },

    //当前被拖拽节点有子节点，递归出被拖拽节点的最大深度

    getMaxLevel(draggingNode) {

      //当节点的子节点为空即 draggingNode.childNodes.length=0 时，将不能给最大深度赋值

      // 当子节点为空时，进行单独赋值

      if (

        draggingNode.childNodes == null ||

        draggingNode.childNodes.length == 0

      ) {

        // console.log("进入到子节点为空的判断");

        if (draggingNode.level > this.maxLevel) {

          this.maxLevel = draggingNode.level;

          console.log(this.maxLevel, "子节点为空");

        }

      } else {

        for (let index = 0; index < draggingNode.childNodes.length; index++) {

          if (draggingNode.childNodes[index].childNodes.length >= 0) {

            this.getMaxLevel(draggingNode.childNodes[index]);

          } else {

            if (draggingNode.level > this.maxLevel) {

              this.maxLevel = draggingNode.level;

            }

          }

        }

      }

    },