vue中树状组织架构插件
vue树状组织架构插件
·
最近公司项目中使用树形展示公司结构,但是项目中主要使用(Vue + Element
),奈何 Element
的树形结构实在不符合需求,我就在网上找到了本文的主角vue2-org-tree
,该插件的最大优点就是可定制性较高,对于后期'和蔼可亲'的甲方提出的需求,可以很好的进行满足。
安装
# use npm
npm i vue2-org-tree
# use yarn
yarn add vue2-org-tree
# 建议安装 less-loader 防止样式出现问题
npm install --save-dev less less-loader
yarn add --save-dev less less-loader
复制代码
引入
在main.js
中添加
import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'
Vue.use(Vue2OrgTree)
复制代码
使用
在项目中创建一个 vue
文件, 配置好路由方便测试
在模板中
<vue2-org-tree :data="data"/>
复制代码
在data
函数中
// 定义数据
data: {
label: '江苏XX',
value: '-1',
children: [
{
value: 'reqjfxqfzr',
label: '需求室负责人',
children: [
{
label: '任通',
value: '1000035939'
},
{
label: '林萍',
value: '23000068'
},
{
label: '王庆安',
value: '23000079'
}
]
},
{
value: 'req_fzr_kf',
label: '开发室负责人',
children: [
{
label: '任通',
value: '1000035939'
},
{
label: '林萍',
value: '23000068'
},
{
label: '王庆安',
value: '23000079'
}
]
},
{
value: 'req_fzr_dsj',
label: '大数据室负责人',
children: [
{
label: '任通',
value: '1000035939'
},
{
label: '林萍',
value: '23000068'
},
{
label: '王庆安',
value: '23000079'
}
]
},
{
value: 'req_fzr_bas',
label: '经分室负责人',
children: [
{
label: '任通',
value: '1000035939'
},
{
label: '林萍',
value: '23000068'
},
{
label: '王庆安',
value: '23000079'
}
]
},
{
value: 'reqownerinfo',
label: '信息化室负责人',
children: [
{
label: '任通',
value: '1000035939'
},
{
label: '林萍',
value: '23000068'
},
{
label: '王庆安',
value: '23000079'
}
]
},
{
value: 'reqownerinfo-aq',
label: '安全室负责人',
children: [
{
label: '任通',
value: '1000035939'
},
{
label: '林萍',
value: '23000068'
},
{
label: '王庆安',
value: '23000079'
}
]
}
]
}
复制代码
效果如下
可以设置属性:horizontal="true"
,从左到右展示
<vue2-org-tree :data="data" :horizontal="true"/>
复制代码
使用 label-class-name
我们还可以动态绑定自定义class
<vue2-org-tree :data="data" :horizontal="true" :label-class-name="labelClassName" />
复制代码
在data
函数中定义变量labelClassName
labelClassName:"bg-color-blue",
复制代码
在样式中对.bg-color-blue
设置样式
style
标签里不能加scoped
不然自定义样式无效
.bg-color-blue{
color: #fff;
background-color: skyblue;
}
复制代码
样式效果如下
设置属性 collapsable
可以收缩起来, @on-expand="onExpand"
可以进行展开操作,
使用 render-content
属性可以自行渲染节点的内容和样式,有利于扩展
@on-node-click="nodeClick"
节点点击属性,可以获得点击时间和节点数据
@on-node-mouseover="onMouseover"
鼠标移入, @on-node-mouseout="onMouseout"
鼠标移出等事件,有需要的小伙伴可以参考案例!
案例代码
vue2-org-tree
案例使用代码:
工程化案例使用代码: gitee.com/yunxii/vue-…
更多推荐
已为社区贡献1条内容
所有评论(0)