这篇文章主要介绍了SpringBoot mybatis 实现多级树形菜单的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、前言
iview-admin中提供了 这么一个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 './directives' 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
<div class="org-tree-drag-wrapper"> <div class="org-tree-wrapper"> </div></div>
项目\src\components\zoom-controller下面建立二个文件:
index.js
import ZoomController from './zoom-controller' export default ZoomController
zoom-co
来源gaodai^.ma#com搞#代!码网
ntroller.vue
<div class="zoom-wrapper"> <button class="zoom-button"> </button><span class="zoom-number">{{ value }}%</span><button class="zoom-button"> </button></div> .trans(@duration) { transition: ~"all @{duration} ease-in"; } .zoom-wrapper { .zoom-button { width: 20px; height: 20px; line-height: 10px; border-radius: 50%; background: rgba(157, 162, 172, 1); box-shadow: 0px 2px 8px 0px rgba(218, 220, 223, 0.7); border: none; cursor: pointer; outline: none; &:active { box-shadow: 0px 0px 2px 2px rgba(218, 220, 223, 0.2) inset; } .trans(0.1s); &:hover { background: #1890ff; .trans(0.1s); } } .zoom-number { color: #657180; padding: 0 8px; display: inline-block; width: 46px; text-align: center; } }
项目\src\view下面建立org.vue文件
<div class="department-outer"> <div class="zoom-box"> </div> <div class="view-box"> </div> </div>
接口中核心代码：
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, "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 }
以上就是SpringBoot mybatis 实现多级树形菜单的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：SpringBoot mybatis 实现多级树形菜单的示例代码
转载请注明原文链接：SpringBoot mybatis 实现多级树形菜单的示例代码
