# Vue-Tree-Chart **Repository Path**: flxe/Vue-Tree-Chart ## Basic Information - **Project Name**: Vue-Tree-Chart - **Description**: Vue2树形图组件 A vue2 component to display tree chart - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 56 - **Forks**: 14 - **Created**: 2019-07-30 - **Last Updated**: 2025-05-27 ## Categories & Tags **Categories**: vue-extensions **Tags**: None ## README 中文 | [English](README.md) # vue-tree-chart [![npm](https://img.shields.io/npm/v/vue-tree-chart.svg)](https://www.npmjs.com/package/vue-tree-chart/) [![license](https://img.shields.io/github/license/tower1229/Vue-Tree-Chart.svg)]() > :deciduous_tree: Vue2树形图组件 ![logo](https://refined-x.com/asset/vtc-logo.png) ## 安装 ```bash npm i vue-tree-chart --save ``` ## 使用 in template: ```html ``` in script: ```js import TreeChart from "vue-tree-chart"; export default { components: { TreeChart }, data() { return { treeData: { ... } } } ... ``` ## 属性 ### json 组件数据,支持字段: ```text - name[String] 节点名称 - image_url[String] 节点图片 - children[Array] 节点后代 - mate[Array] 节点配偶 - class[Array] 节点自定义class,字符串数组 - extend[Boolean] 展开/收起节点后代,默认展开 ``` 示例: ```js { name: 'root', image_url: "https://static.refined-x.com/avat.jpg", class: ["rootNode"], 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(node) 点击节点触发,接收当前节点数据为参数 ## 演示 ```bash npm run serve ``` ## 构建 ``` bash npm run build-bundle ``` Copyright (c) 2017-present, [前端路上](http://refined-x.com)