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文件
接口中核心代码:
List
List
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
}