< eltree:treeData = " treeData" > </ eltree> import eltree from "../../components/tree.vue" ;
export default { name : '' , components : { eltree} , watch : { } , data ( ) { return { orgFormchoose : { } , orgForm : { type : 0 , limits : 1 } , operateIndex : 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; } , }
}
< template> < div> < el-treeclass = " 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; " > < spanslot-scope = " { data }" > < spanclass = " typecss" > </ span> < spanclass = " identy" :style = " { color: data.type == 1?'#2762e2':data.type == 0?'#36b636': '#999' }" > </ span> < spanid = " LABEL" > </ span> </ span> </ el-tree> < divv-show = " optionCardShow" id = " right-menu" ref = " container" :style = " {top: optionCardY +'px', left: optionCardX +'px'}" @contextmenu.prevent = " rightrightClick($event)" > < spanstyle = " position : absolute; top : 0px; right : 0px; color : #333; border : 1px solid #999; font-size : 13px; " @click = " optionCardShow=false" > < iclass = " el-icon-close" > </ i> </ span> < divstyle = " margin-top : 5px; " > < divclass = " btu" v-for = " (item, index) in btuList" :key = " index" @click = " BtuClick(item)" > < 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) ; window. addEventListener ( 'resize' , this . handleResize) ; } , methods : { 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 ; } } , getProjectVolumeTree ( ) { console. log ( 'tree拖拽成功完成时触发的事件' ) ; } , allowDrag ( draggingNode ) { console. log ( '8989' , draggingNode. data. allname) ; 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. ythis . $parent. ParentChooseOrgTree ( data) ; this . rightoptionData = datathis . optionCardShow = true } , rightMenuClose ( event ) { let dom = document. getElementById ( 'right-menu' ) if ( dom) { if ( ! dom. contains ( event. target) ) { this . optionCardShow = false } } } , 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>
在这里插入代码片
)
