【记录31】elementUI el-tree 虚线、右键、拖拽_elementui tree控件拖动到div

父组件

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

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('已悉知')
      //                  }
      //              }
      //          });
      //      }
      //  }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

子组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

在这里插入代码片
1