组织结构图插件_⼀个简单直接的组织结构图插件组织结构图插件
Vue-orgchart (vue-orgchart)
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.这是⼀个简单直接的组织结构图插件。 任何时候想要树状图表，都可以转到OrgChart。
特征 (Features)
For now, just static organization chart
现在，只是静态组织结构图
安装 (Installation)
npm install vue-organization-chart -S
⽤法 (Usage)
<template>
<div>
<organization-chart :datasource="ds"></organization-chart>
</div>
</template>
<script>
import Vue from 'vue'
import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'
export default {
components: {
OrganizationChart
},
vuejson转对象data () {
return {
ds: {
'id': '1',
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{ 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
{ 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
'children': [
{ 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
{ 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
'children': [
{ 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
{ 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
]
}
]
},
{ 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
{ 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
]
}
}
}
}
</script>
属性 (Attributes)
Name Type Required Default Description
datasource json yes datasource usded to build out structure of orgchart. It could be a json object. pan boolean no false Users could pan the orgchart by mouse drag&drop if they enable this attribute.
zoom boolean no false Users could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute.
zoomin-limit number no7Users are allowed to set a zoom-in limit.
zoomout-
limit
number no0.5Users are allowed to set a zoom-out limit.
名称类型需要默认描述
数据源json是数据源⽤于构建orgchart结构。 它可能是⼀个json对象。
泛布尔值没有假如果启⽤此属性，则⽤户可以通过⿏标拖放来移动orgchart。
名称类型需要默认描述
放⼤布尔值没有假如果启⽤此属性，则⽤户可以通过⿏标滚轮放⼤/缩⼩组织结构图。放⼤极限数没有7允许⽤户设置放⼤限制。
缩⼩限制数没有0.5允许⽤户设置缩⼩限制。
⼤事记 (Events)
Name Parameters Description
node-click node data triggers when user clicks the node.
名称参量描述
节点单击节点数据当⽤户单击节点时触发。
范围插槽 (Scoped Slots)
<template slot-scope="{ nodeData }">
<!-- feel free to customize the internal structure of node -->
</template>
组织结构图插件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。