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 './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
项目\src\components\zoom-controller下面建立二个文件:
index.js
import ZoomController from './zoom-controller' export default ZoomController
zoom-controller.vue
{{ value }}%
项目\src\view下面建立org.vue文件
接口中核心代码:
ListstatiOns= 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 实现多级树形菜单的示例代码的文章就介绍到这了,更多相关SpringBoot mybatis多级树形菜单内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!