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

父组件

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('提醒：当前组织机构树存在下级节点，无法删除！
提醒：请再次确认删除本级组织机构，删除后无法恢复！', '提示', {      //              confirmButtonText: '确定',      //              callback: action => {      //                  if (action == "confirm") {      //                      this.$message.success('已悉知')      //                  }      //              }      //          });      //      }      //  }    }}

子组件

                      {{ data.level == 1?'局':data.level == 2?'司':data.level == 3?'项':data.level == 4?'隧': '' }}      {{ data.type == 1?'管':data.type == 0?'用': '' }}{{ data.allname }}      { node.level == 1?'主':node.level == 2?'次':node.level == 3?'项':node.level == 4?'隧': '其' }} -->                        {{ item.label }}              

  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();      },    }  };

在这里插入代码片

（）（）