用vue写一个虚拟tree组件

A：好的，下面是一个简单的基于 Vue 的虚拟 Tree 组件示例：

<template>
  <div class="tree">
    <div v-for="node in visibleNodes" :key="node.id">
      <div :style="{ 'padding-left': node.level * 20 + 'px' }">
        <i v-if="hasChildren(node)" @click="toggleChildren(node)" :class="iconClasses(node)"></i>
        {{ node.label }}
      </div>
      <tree v-if="node.open && hasChildren(node)" :nodeList="node.children" :level="node.level + 1" @node-selected="onNodeSelected">
      </tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tree',

  props: {
    nodeList: { type: Array, required: true },
    level: { type: Number, default: 0 }
  },

  data() {
    return {
      expandedNodes: []
    };
  },

  computed: {
    visibleNodes() {
      return this.nodeList.filter((node) => {
        const parentId = node.parentId;
        if (parentId === undefined) {
          return true;
        }
        const parent = this.nodeList.find(n => n.id === parentId);
        return parent.open && parent.id !== node.id;
      });
    }
  },

  methods: {
    hasChildren(node) {
      return node.children && node.children.length > 0;
    },

    toggleChildren(node) {
      if (this.expandedNodes.includes(node.id)) {
        this.expandedNodes.splice(this.expandedNodes.indexOf(node.id), 1);
      } else {
        this.expandedNodes.push(node.id);
      }
    },

    iconClasses(node) {
      return ['fa', this.expandedNodes.includes(node.id) ? 'fa-folder-open' : 'fa-folder'];
    },

    onNodeSelected(node) {
      this.$emit('node-selected', node);
    }
  }
};
</script>

<style>
.tree {
  font-size: 14px;
  color: #333;
}
</style>

说明：

该组件接受一个 nodeList 数组作为 props，其中每个节点需要包含 id、label、level、parentId、children 等属性。可通过监听 @node-selected 事件来获取选中节点。

组件实现的功能包括：

- 显示树形结构，包含父子节点关系和层级关系。
- 点击文件夹图标可展开或收起子节点列表。
- 子节点列表使用虚拟滚动技术，只展示当前可见区域内的节点，减少渲染次数，提高性能。