vue tree 组件

Vue Tree组件是一个基于Vue.js的可折叠树形组件，可以用于显示层次结构数据。以下是一个简单的Vue Tree组件的示例：

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <div @click="toggleNode(node)">
          <span v-if="node.children" :class="{ 'expanded': node.expanded, 'collapsed': !node.expanded }"></span>
          {{ node.label }}
        </div>
        <tree-node v-if="node.children" :tree-data="node.children" :is-expanded="node.expanded"></tree-node>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    },
    isExpanded: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      expanded: this.isExpanded
    }
  },
  methods: {
    toggleNode(node) {
      if (node.children) {
        node.expanded = !node.expanded
      }
    }
  },
  components: {
    'tree-node': this.$options.components.TreeNode
  }
}
</script>

<style>
.expanded:before {
  content: '-';
}
.collapsed:before {
  content: '+';
}
</style>

在上面的代码中，我们定义了一个名为TreeNode的组件，它接收一个treeData属性，该属性是一个包含节点数据的数组。组件使用递归方式来渲染树形结构，如果节点有子节点，则会渲染一个新的TreeNode组件来显示子节点。

我们还定义了一个toggleNode方法，用于切换节点的展开状态。在模板中，我们使用v-for指令来遍历treeData数组，并使用v-if指令来判断节点是否有子节点。如果节点有子节点，则会渲染一个包含子节点的TreeNode组件。

如果您想要更多的Vue Tree组件的示例和用法，请参考上面提到的GitHub链接。