【记录31】elementUI el-tree 虚线、右键、拖拽

父组件

<eltree :treeData="treeData"></eltree>

import eltree from "../../components/tree.vue";
export default {
    name: '',
    components: { 
        // org_tree ,
        eltree
    },
    watch: {
        
    },
    data() {
        return {
            orgFormchoose: {},
            orgForm: { type: 0, limits: 1 },
            operateIndex: 1, // 默认 1  查看
            operateDisable: true,
            treeData: [
                { parentId: null, id: 1, level: 1, type: null, checkbox: '1', allname: '组织机构1', name:'机构1简称', code:'机构1编码', show: true, 
                    children: [
                        { parentId: 1, id: 101, level: 2, type: null, checkbox: '2', allname: '组织机构1-1', show: false, },
                        { parentId: 1, id: 102, level: 2, type: null, checkbox: '3', allname: '组织机构1-2', show: false, },
                    ] 
                },
                { parentId: null, id: 2, level: 1, type: null, checkbox: '4', allname: '组织机构2', show: true, 
                    children: [
                        { parentId: 2, id: 201, level: 2, type: null, checkbox: '5', allname: '组织机构2-1', show: false, },
                        { parentId: 2, id: 202, level: 2, type: null, checkbox: '6', allname: '组织机构2-2', show: false, 
                            children: [
                                { parentId: 202, id: 2001, level: 3, type: null, checkbox: '7',  allname: '组织机构2-1-1', show: false,
                                    children: [
                                        { parentId: 2001, id: 20001, level: 3, type: null, checkbox: '8', allname: '8组织机构2-1-1', show: false, },
                                        { parentId: 2001, id: 20002, level: 3, type: null, checkbox: '9', allname: '9组织机构2-2-2', show: false, },
                                        { parentId: 2001, id: 20003, level: 3, type: null, checkbox: '11', allname: '11组织机构2-1-1', show: false, },
                                        { parentId: 2001, id: 20004, level: 3, type: null, checkbox: '12', allname: '12组织机构2-2-2', show: false, },
                                        { parentId: 2001, id: 20005, level: 3, type: null, checkbox: '13', allname: '13组织机构2-1-1', show: false, },
                                    ] 
                                },
                                { parentId: 202, id: 2002, level: 3, type: null, checkbox: '10', allname: '组织机构2-2-2', show: false, },
                            ] 
                        },
                    ] 
                },
                { parentId: null, id: 3, level: 1, type: null, checkbox: '100', allname: '组织机构3', show: true, }
            ],
        }
    },
    mounted() {},
    methods: {
        // 选择的节点信息
        ParentChooseOrgTree(_ulItem) {
            this.orgForm = _ulItem;
        },
        //  右击  删除
        ParentChooseDeleteOrgTree(_ulItem, _item) {
            this.operateIndex = _item.value;
        },
        //  组织机构点击操作
        //operateClick(_item, _index) {
        //    console.log(_item.label, _index);
        //    if (_index == 0 || _index == 2) {
        //        this.operateDisable = false;
        //    }else{
        //        this.operateDisable = true;
        //    }
        //    this.operateIndex = _index;
        //    if (_index === 3) {
        //        this.$alert('','',{
        //            confirmButtonText: '确定',
        //            callback: action  => {
        //                if (action  === 'confirm') {
        //                    this.$message.success('已悉知')
       //                 }
       //             }
       //         })
       //         this.$alert('提醒：当前组织机构树存在下级节点，无法删除！<br/>提醒：请再次确认删除本级组织机构，删除后无法恢复！', '提示', {
      //              confirmButtonText: '确定',
      //              callback: action => {
      //                  if (action == "confirm") {
      //                      this.$message.success('已悉知')
      //                  }
      //              }
      //          });
      //      }
      //  }
    }
}

子组件

<template>
  <div>
    <el-tree
    class="tree"
    :indent="0"
    ref="tree"
    :show-checkbox="true"
    :data="data"
    :props="defaultProps"
    node-key="checkbox"
    empty-text="暂无节点权限，联系管理员"
    :default-expand-all="false"
    :check-strictly="true"
    :check-on-click-node="true"
    :accordion="false"
    :highlight-current="true"
    @node-contextmenu="nodeMenu"
    @node-drop="handleDrop"
    draggable
    :allow-drop="allowDrop"
    style="padding-left: 0px;">
    <span slot-scope="{ data }">
      <!-- <span slot-scope="{ node, data }"> -->
      <span class="typecss">{{ data.level == 1?'局':data.level == 2?'司':data.level == 3?'项':data.level == 4?'隧': '' }}</span>
      <span class="identy" :style="{ color: data.type == 1?'#2762e2':data.type == 0?'#36b636': '#999' }">{{ data.type == 1?'管':data.type == 0?'用': '' }}</span><span id="LABEL">{{ data.allname }}</span>
      <!-- <span class="idty">{{ node.level == 1?'主':node.level == 2?'次':node.level == 3?'项':node.level == 4?'隧': '其' }}</span> -->
    </span>
  </el-tree>
  <!--  -->
  <div v-show="optionCardShow" id="right-menu" ref="container" :style="{top: optionCardY  +'px', left: optionCardX  +'px'}" @contextmenu.prevent="rightrightClick($event)">
    <span style="position:absolute; top:0px; right:0px; color:#333;border:1px solid #999; font-size:13px;" @click="optionCardShow=false"><i class="el-icon-close"></i></span>
    <div style="margin-top:5px;">
      <div class="btu" v-for="(item, index) in btuList" :key="index" @click="BtuClick(item)"><span>{{ item.label }}</span></div>
      <!-- <div class="btu"><span>查看本级机构</span></div>
      <div class="btu"><span>修改本级机构</span></div>
      <div class="btu" @click="BtuClick"><span>删除本级机构</span></div>
      <div class="btu"><span>映射本级机构</span></div> -->
    </div>
  </div>
  </div>
</template>

<script>
  export default {
    props: [ 'treeData'],
    data() {
      return {
        optionCardShow: false,
        optionCardY: 100, optionCardX: 100, postionStyle:{},
        data:this.treeData,  //  父组件传值
        selectNode: {},
        rightoptionData: {},
        btuList: [{ label: '新增', value: 0 },{ label: '查看', value: 1 },{ label: '修改', value: 2 },{ label: '删除', value: 3 },{ label: '迁移', value: 4 }],
        btuUserList: [],
        defaultProps: {
          children: 'children',
          label: 'allname'
        }
      };
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
    },
    mounted() {
      console.log(this.treeData);
      // this.data = this.treeData;
      window.addEventListener('resize', this.handleResize);
    },
    methods: {
      // handleDragStart(node, ev) {  // 节点开始拖拽时触发的事件
      //   console.log('节点开始拖拽时触发的事件  drag start', node, ev);
      // },
      // handleDragEnter(draggingNode, dropNode, ev) {  //  拖拽进入其他节点时触发的事件
      //   console.log('拖拽进入其他节点时触发的事件  tree drag enter: ',draggingNode, dropNode, ev);
      // },
      // handleDragLeave(draggingNode, dropNode, ev) {  //  拖拽离开某个节点时触发的事件
      // if (draggingNode.data.parentId !== dropNode.data.parentId) {
      //    alert('超出拖拽的节点范围，拖拽只能在同父节点下')
      // }
        // console.log('****************拖拽离开某个节点时触发的事件 tree drag leave: ',draggingNode, dropNode.label, ev);
      // },
      // handleDragOver(draggingNode, dropNode, ev) {  // 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）
      // // if (condition) {
      // // }
      //   console.log('在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）  tree drag over: ', draggingNode, dropNode.label, ev);
      // },
      // handleDragEnd(draggingNode, dropNode, dropType, ev) {  //  拖拽结束时（可能未成功）触发的事件
      //   console.log('拖拽结束时（可能未成功）触发的事件  tree drag end: ',draggingNode, dropNode && dropNode.label, dropType, ev);
      // },
      handleDrop(draggingNode, dropNode, dropType, ev) {    //   拖拽成功完成时触发的事件
        this.getProjectVolumeTree();  //  拖拽成功 触发相应接口
        console.log('拖拽成功完成时触发的事件  tree drop: ',draggingNode, dropNode.label, dropType, ev);
      },
      allowDrop(draggingNode, dropNode, type) {  //  拖拽时判定目标节点能否被放置
        console.log('拖拽时判定目标节点能否被放置  allowDrop', draggingNode, dropNode, type);
        if (draggingNode.data.level === dropNode.data.level) {
          if (draggingNode.data.parentId === dropNode.data.parentId) {
            return type === "prev" || type === "next";
          } else {
            return false;
          }
        } else {
          // 不同级进行处理
          return false;
        }
      },
      //tree拖拽成功完成时触发的事件 
      getProjectVolumeTree() {
        console.log('tree拖拽成功完成时触发的事件');
      },
      allowDrag(draggingNode) {
        console.log('8989', draggingNode.data.allname);
        // return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
        return true;
      },
      //  单选
      handleNodeClick (data, checked, node) {
        console.log(data,'ppp');
        console.log( checked, 'll');
        console.log(node);
        
        if (checked) {
          this.$refs.tree.setCheckedNodes([data])
          this.selectNode = data;
          this.$parent.ParentChooseOrgTree(data);
        }
      },
      //  右击
      nodeMenu(e, data, n, t) {
        console.log(e, data, n,t, '右击');
        this.optionCardShow = false
        this.optionCardX = e.x // 让右键菜单出现在鼠标右键的位置
        this.optionCardY = e.y
        this.$parent.ParentChooseOrgTree(data);
        this.rightoptionData = data
        // this.node = n // 将当前节点保存
        this.optionCardShow = true // 展示右键菜单
      },
      rightMenuClose(event) {
        let dom = document.getElementById('right-menu')
        if (dom) {
          if (!dom.contains(event.target)) {
            //点击到了id为right-menu以外的区域，就隐藏菜单
            this.optionCardShow = false
          }
        }
      },
      // 右击demo事件
      BtuClick(_item) {
        console.log(_item);
        switch (_item.value) {
          case 0:
            this.$message.warning(_item.label)
            break;
          case 1:
            this.$message.warning(_item.label)
            break;
          case 2:
            this.$message.warning(_item.label)
            break;
          case 3: //删除事件
          this.$parent.ParentChooseDeleteOrgTree(this.selectNode, _item);  //  父组件事件，在这里是子组件调用父组件函数
            this.$message.warning(_item.label)
            break;
          case 4:
            this.$message.warning(_item.label)
            break;
          default:
            break;
        }
      },
      //
      rightrightClick(event) {
        event.preventDefault();
      },
    }
  };
</script>

在这里插入代码片