SpringBoot mybatis 实现多级树形菜单的示例代码

SpringBoot mybatis 实现多级树形菜单的示例代码

一、前言

iview-admin中提供了 v-org-tree 这么一个vue组件可以实现树形菜单，下面来提供一下在element-ui中的使用教程（项目见：https://github.com/lison16/v-org-tree）

集成了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

import Clipboard from 'clipboard'

export default {

bind: (el, binding) => {

const clipboard = new Clipboard(el, {

text: () => binding.value.value

})

el.__success_callback__ = binding.value.success

el.__error_callback__ = binding.value.error

clipboard.on('success', e => {

const callback = el.__success_callback__

callback && callback(e)

})

clipboard.on('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__ = binding.value.error

},

unbind: (el, binding) => {

delete el.__success_callback__

delete el.__error_callback__

el.__clipboard__.destroy()

delete el.__clipboard__

}

}

draggable.js

import { on } from '@/libs/tools'

export default {

inserted: (el, binding, vnode) => {

const triggerDom = document.querySelector(binding.value.trigger)

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(bodyDom.style.transform)

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) bodyDom.style.transform = `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 (!binding.value.recover) return

const bodyDom = document.querySelector(binding.value.body)

bodyDom.style.transform = ''

}

}

directives.js

import draggable from './module/draggable'

import clipboard from './module/clipboard'

const directives = {

draggable,

clipboard

}

export default directives

index.js

import directive from './directiveshttp://'

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

ref="dragWrapper"

class="org-tree-drag-wrapper"

@mousedown="mousedownView"

@contextmenu="handleDocumentContextmenu"

>

v-if="data"

:data="data"

:node-render="nodeRender"

:expand-all="true"

@on-node-click="handleNodeClick"

collapsable

>

v-if="data"

:data="data"

:node-render="nodeRender"

:expand-all="true"

@on-node-click="handleNodeClick"

collapsable

>

项目\src\components\zoom-controller下面建立二个文件:

index.js

import ZoomController from './zoom-controller'

export default ZoomController

zoom-controller.vue

{{ value }}%

项目\src\view下面建立org.vue文件

            v-if="data"

            :data="data"

            :zoom-handled="zoomHandled"

            :menuList="menuList"

            @on-menu-click="handleMenuClick"

        >

            v-if="data"

            :data="data"

            :zoom-handled="zoomHandled"

            :menuList="menuList"

            @on-menu-click="handleMenuClick"

        >

接口中核心代码：

List stations = stationService.listByEntity(station,levelList);

List stationVos = new ArrayList();

for(Station s : stations) {

StationVo vo = new StationVo();

vo.setId(s.getId());

vo.setLevel(s.getLevel());

vo.setName(s.getName());

stationVos.add(vo);

}

数据库中四个字段

mybatis  配置：

返回的json如下：

{

"data" : {

"page" : 1,

"pageSize" : 20,

"total" : 6,

"pages" : 1,

"list" : [ {

"id" : 1,

"name" : "天猫科技服务有限公司",

"level" : 1,

"status" : 1,

}, {

"id" : 2,

"name" : "淘宝技术服务有限公司",

"level" : 1,

"status" : 1,

}, {

"id" : 3,

XMwofqU "name" : "聚划算科技服务有限公司",

"level" : 1,

"status" : 1,

}, {

"id" : 4,

"name" : "菜鸟金服",

"level" : 2,

"status" : 1,

}, {

"id" : 5,

"name" : "黑鸟网络",

"level" : 3,

"status" : 1,

}, {

"id" : 6,

"name" : "白鸟 网络",

"level" : 3,

"status" : 1,

} ]

},

"message" : "获取成功",

"code" : 200

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。