https://juejin.im/post/6844903519309283335?utm_source=tuicool&utm_medium=referral#heading-7
https://github.com/HigorSilvaRosa/vue-org-chart/blob/master/src/org-chart/OrgChart.vue
https://github.com/hukaibaihu/vue-org-tree/blob/master/src/components/org-tree/node.js
A simple organization tree chart based on Vue2.x
# use npm
npm i vue2-org-tree
# use yarn
yarn add vue2-org-tree
import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'
Vue.use(Vue2OrgTree)
// ...
# css
<link href="https://unpkg.com/vue2-org-tree/dist/style.css">
# js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree/dist/index.js"></script>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
direction | 树的展开方向 | String | horizontal / vertical | vertical |
label-width | 节点的宽度,默认为自动宽度。如果 label-width 为 number 类型,单位 px;如果 label-width 为 string 类型,则这个宽度会设置为 节点 的 style.width 的值,节点的宽度会受控于外部样式 | string/number | — | — |
label-height | 节点的高度,默认为自动高度。如果 label-height 为 number 类型,单位 px;如果 label-height 为 string 类型,则这个高度会设置为 节点 的 style.height 的值,节点的高度会受控于外部样式 | string/number | — | — |
label-class-name | 节点 className 的回调方法,也可以使用字符串为所有的节点设置一个固定的 className | Function({node)/String | — | — |
show-collapsable | 节点是否可被展开 | Boolean | — | false |
default-expand-all | 是否默认展开所有节点,该参数只有在 show-collapsable 为 true 时有效 | Boolean | — | false |
render-content | 树节点的内容区的渲染 Function | Function(h, node) | — | — |
props | 配置选项,具体看下表 | object | — | — |
node-key | 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 | String | — | — |
default-expanded-keys | 默认展开的节点的 key 的数组(需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。) | array | — | — |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
children | 指定节点标签为节点对象的某个属性值 | string | — | — |
事件名称 | 说明 | 回调参数 |
---|---|---|
node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
node-expand | 节点被展开时触发的事件 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
well be called when the collapse-btn clicked
- params
e
Event
- params
data
Current node data
well be called when the node-label clicked
- params
e
Event
- params
data
Current node data
It is called when the mouse hovers over the label.
- params
e
Event
- params
data
Current node data
It is called when the mouse leaves the label.
- params
e
Event
- params
data
Current node data
use table layout!
IE9+、Chrome、Firefox、Opera