vue树形组件_一个vue2组件以显示树形图

最新推荐文章于 2025-08-16 00:57:32 发布

翻译最新推荐文章于 2025-08-16 00:57:32 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://vuejsexamples.com/a-vue2-component-to-display-tree-chart/

文章标签：

#vue #js #react #python #json #ViewUI

本文介绍了如何使用Vue2创建一个用于展示树形图的组件，包括安装、使用方法、属性配置、事件监听（如点击节点）以及示例代码。通过这个组件，可以方便地在应用中展示树状数据结构。

vue树形组件

维树图 (vue-tree-chart)

A vue2 component to display tree chart.

显示树形图的vue2组件。

安装 (Install)

npm i vue-tree-chart --save

用法 (Usage)

in template:

在模板中：

<TreeChart :json="treeData" />

in script:

在脚本中：

import TreeChart from "vue-tree-chart";

export default {
	components: {
    	TreeChart
	},
	data() {
		return {
			treeData: {
				...
			}
		}
	}
	...

Struts (Prop)

json (json)

Component data to support those field：

支持这些领域的组件数据：

- name[String] to display a node name
- image_url[String] to display a node image
- children[Array] node`s children
- mate[Object] node`s mate
- extend[Boolean] show/hide node`s children, default True

Example：

例：

{
    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"
      }
    ]
  }

事件 (Event)

点击节点(节点) (click-node(node))

Click on the node triggered, receive the current node data as a parameter

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

运行演示 (Run a demo)

npm run serve

建立 (Build)

npm run build-bundle

翻译自: https://vuejsexamples.com/a-vue2-component-to-display-tree-chart/

vue树形组件