vue tree

<template>
  <div>
    <tree :data="treeData" @node-click="handleNodeClick"></tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: 'Parent 1',
          children: [
            {
              label: 'Child 1-1'
            },
            {
              label: 'Child 1-2'
            }
          ]
        },
        {
          label: 'Parent 2'
        }
      ]
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log('Node clicked:', data);
    }
  }
};
</script>

<style scoped>
/* Add some styles if necessary */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了一个自定义组件 <tree>，并传递了 treeData 作为属性。
   • 绑定了一个点击事件 @node-click，当树节点被点击时会触发 handleNodeClick 方法。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，其中 data 函数返回一个包含树结构数据的对象 treeData。
   • treeData 是一个数组，每个元素代表一个树节点。节点可以有 label 属性表示节点名称，也可以有 children 属性表示子节点。
   • methods 中定义了 handleNodeClick 方法，用于处理节点点击事件，并在控制台输出被点击的节点数据。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加一些样式来美化树组件。

这个示例展示了如何使用 Vue.js 创建一个简单的树形结构，并处理节点点击事件。