基于Vue实现动态组织结构图
发布在前端路上2018年8月6日view:1151vue
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

中文 | English

vue-tree-chart

npm license

:deciduous_tree: Vue2树形图组件

logo

安装

npm i vue-tree-chart --save

使用

in template:

<TreeChart :json="treeData" />

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

Copyright (c) 2017-present, 前端路上

评论
发表评论
暂无评论
WRITTEN BY
雅X共赏
前端路上:www.refined-x.com
TA的新浪微博
PUBLISHED IN
前端路上

前端路上,与你同行。

我的收藏