Element tree形控件 叶子节拖拽位置

image.png image.png

  /**
       * 拖拽时判定目标节点能否被放置
       * type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
       * **/
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.caseInfo == '1') { //如果 目标节点是 用例菜单类型 ，只可以平级，不可插入至目标节点。
          return type !== 'inner';
        } else if (dropNode.data.isTop == true) {  //如果 目标节点是 顶级菜单，不可于顶级菜单平级（不可放在顶级菜单前 后）。
          return type !== 'prev' && 'next';
        } else {
          return true;
        }
      },
      /**
       * 拖拽成功完成时触发的事件
       * 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、even
       * **/
      nodeDrop(draggingNode, dropNode, dropType, ev) {
        if (dropNode.data.id) { //如果dropNode.data.id存在，表明拖拽的节点不是顶级菜单 吊接口
          GetTestLineData.testCaseGroupUpdateByTree({
            presentId: draggingNode.data.id,
            relation: dropType,
            referenceId: dropNode.data.id,
            caseInfo: draggingNode.data.caseInfo
          }).then((response) => {
            if (response.status == 200) {
              this.$message.success('拖拽成功!')
              this.getTreeList()
              /*清除基础数据*/
              this.cancel()
              this.treeDelBtn = "选择"
              this.showCheckBox = false
            } else {
              this.$message.error(response.message)
            }
          }).catch((error) => {
            this.$message.error('出错啦')
            this.getTreeList()
            /*清除基础数据*/
            this.cancel()
          })
          // }
        } else { //否则，如果拖拽的位置是顶级菜单外，刷新树
          this.getTreeList()
        }
      },

欢迎一起交流呀~