Vue组织架构树图组件vue-org-tree的使用解析

目录

• Vue组织架构树图组件vue-org-tree
• 说明
• 快速开始
• API
• Vue组织架构图组件
• vue-tree-chart

Vue组织架构树图组件vue-org-tree

说明

最近需要作出一个组织架构图来可视化展示一下，最后找到vue-org-tree这个组件，觉得效果还不错~，可选节点颜色、横向/纵向展开、打开/收起，在这记录一下使用方法，效果图如下：

快速开始

安装

npm install --save-dev less less-loader
npm install --save-dev vue2-org-tree

（可能还需要安装其他组件，报错的话根据提示再install就行）

然后在main.js引入

import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)

使用

API

• props

prop	descripton	type	default
data		Object
props	configure props	Object	{label: 'label', children: 'children', expand: 'expand'}
labelWidth	node label width	String | Number.	auto
collapsable	children node is collapsable	Boolean	true
renderContent	how to render node label	Function	-
labelClassName	node label class	Function | String	-

events

• on-expand
• well be called when the collapse-btn clicked
• on-node-click
• well be called when the node-label clicked

参考html例子：https://github.com/hukaibaihu/vue-org-tree/blob/gh-pages/index.html

组件github：https://github.com/hukaibaihu/vue-org-tree

Vue组织架构图组件

vue-tree-chart

:deciduous_tree: Vue2树形图组件

安装：

npm i vue-tree-chart --save

使用：

• in template:

• in script:

import TreeChart from "vue-tree-chart";
export default {
	components: {
    	TreeChart
	},
	data() {
		return {
			treeData: {
				...
			}
		}
	}
	...

属性：

• json

组件数据，支持字段：

• - name[String] 节点名称
• - image_url[String] 节点图片
• - children[Array] 节点后代
• - mate[Object] 节点配偶

示例：

{
    name: 'root',
    image_url: "https://static.refined-x.com/avat.jpg",
    children: [
      {
        name: 'children1',
        image_url: "https://static.refined-x.com/avat1.jpg"
      },
      {
        name: 'children2',
        image_url: "https://static.refined-x.com/avat2.jpg",
        mate: {
          name: 'mate',
          image_url: "https://static.refined-x.com/avat3.jpg"
        },
        children: [
          {
            name: 'grandchild',
            image_url: "https://static.refined-x.com/avat.jpg"
          },
          {
            name: 'grandchild2',
            image_url: "https://static.refined-x.com/avat1.jpg"
          },
          {
            name: 'grandchild3',
            image_url: "https://static.refined-x.com/avat2.jpg"
          }
        ]
      },
      {
        name: 'children3',
        image_url: "https://static.refined-x.com/avat.jpg"
      }
    ]
  }

事件：

• click-node

点击节点触发，接收当前节点数据为参数

演示：

npm run serve

构建：

npm run build-bundle

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。