SpringBootmybatis实现多级树形菜单⼀、前⾔
⼩编集成了el-dropdown下拉菜单（⿏标左击显⽰菜单），和右击⾃定义菜单，两种⽅式，效果图如下：
⼆、使⽤教程
（1）安装依赖
npm install clipboard
npm install v-click-outside-x
npm install v-org-tree
（2）引⼊组件
在main.js⽂件中引⼊
import TreeTable from 'tree-table-vue'
import VOrgTree from 'v-org-tree'
（3）引⼊部分js⼯具⽅法
在项⽬⽬录下 -> src -> directive⽂件夹中引⼊如下4个js⽂件
clipboard.js
bind: (el, binding) => {
const clipboard = new Clipboard(el, {
text: () => binding.value.value
})
el.__success_callback__ = binding.value.success    el.__error_callback__ =
<('success', e => {
const callback = el.__success_callback__
callback && callback(e)
})
<('error', e => {
const callback = el.__error_callback__
callback && callback(e)
})
el.__clipboard__ = clipboard
},
update: (el, binding) => {
el.__clipboard__.text = () => binding.value.value    el.__success_callback__ = binding.value.success    el.__error_callback__ =
},
unbind: (el, binding) => {
delete el.__success_callback__
delete el.__error_callback__
el.__clipboard__.destroy()
delete el.__clipboard__
}
}
draggable.js
inserted: (el, binding, vnode) => {
const triggerDom = document.querySelector(igger)
triggerDom.style.cursor = 'move'
const bodyDom = document.querySelector(binding.value.body)
let pageX = 0
let pageY = 0
let transformX = 0
let transformY = 0
let canMove = false
const handleMousedown = e => {
let transform = /\(.*\)/.exec(ansform)
if (transform) {
transform = transform[0].slice(1, transform[0].length - 1)
const splitxy = transform.split('px, ')
transformX = parseFloat(splitxy[0])
transformY = parseFloat(splitxy[1].split('px')[0])
}
pageX = e.pageX
pageY = e.pageY
canMove = true
}
const handleMousemove = e => {
const xOffset = e.pageX - pageX + transformX
const yOffset = e.pageY - pageY + transformY
if (canMove) ansform = `translate(${xOffset}px, ${yOffset}px)`    }
const handleMouseup = e => {
canMove = false
}
on(triggerDom, 'mousedown', handleMousedown)
on(document, 'mousemove', handleMousemove)
on(document, 'mouseup', handleMouseup)
},
update: (el, binding, vnode) => {
if (!ver) return
const bodyDom = document.querySelector(binding.value.body)
ansform = ''
}
}
directives.js
import draggable from './module/draggable'
import clipboard from './module/clipboard'
const directives = {
draggable,
clipboard
}
export default directives
index.js
const importDirective = Vue => {
/**
* 拖拽指令 v-draggable="options"
* options = {
*  trigger: /这⾥传⼊作为拖拽触发器的CSS选择器/,
*  body:    /这⾥传⼊需要移动容器的CSS选择器/,
*  recover: /拖动结束之后是否恢复到原来的位置/
* }
*/
Vue.directive('draggable', directive.draggable)
/**
* clipboard指令 v-draggable="options"
* options = {
*  value:    /在输⼊框中使⽤v-model绑定的值/,
*  success:  /复制成功后的回调/,
*  error:    /复制失败后的回调/
* }
*/
Vue.directive('clipboard', directive.clipboard)
}
export default importDirective
（4）正式使⽤v-org-tree组件
在所要使⽤的地⽅新增如下⼏个⽂件，⽐如我要写在user-group⽂件夹中
项⽬\src\components\org-view下⾯建⽴⼆个⽂件:
index.js
import OrgView from './org-view.vue'
export default OrgView
org-view.vue
<template>
<div
ref="dragWrapper"
class="org-tree-drag-wrapper"
@mousedown="mousedownView"
@contextmenu="handleDocumentContextmenu"
>
<div class="org-tree-wrapper" :>
<v-org-tree
v-if="data"
:data="data"
:
node-render="nodeRender"
:expand-all="true"
@on-node-click="handleNodeClick"
collapsable
></v-org-tree>
</div>
</div>
</template>
</template>
<script>
import { on, off } from '@/directive/module/tools'
export default {
name: 'OrgView',
props: {
zoomHandled: {
type: Number,
default: 1
},
data: Object,
menuList: {
type: Array,
default: function () {
return [
{
key: 'edit',
label: '编辑公司'
},
{
key: 'detail',
label: '查看公司'
},
{
key: 'add',
label: '新增⼦公司'
},
{
key: 'delete',
label: '删除公司'
}
]
nodeselector}
}
},
data () {
return {
currentContextMenuId: '',
orgTreeOffsetLeft: 0,
orgTreeOffsetTop: 0,
initPageX: 0,
initPageY: 0,
oldMarginLeft: 0,
oldMarginTop: 0,
canMove: false
}
},
computed: {
orgTreeStyle () {
return {
transform: `translate(-50%, -50%) scale(${Handled}, ${          Handled
})`,
marginLeft: `${TreeOffsetLeft}px`,
marginTop: `${TreeOffsetTop}px`
}
}
},
methods: {
handleNodeClick (e, data, expand) {
expand()
},
closeMenu () {
this.currentContextMenuId = ''

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。