vite+ts实现 家谱树

要在Vite和TypeScript中实现家谱树，你可以使用一个简单的组件来展示层级数据。以下是一个简单的例子：

1. 安装Vite和TypeScript的依赖（如果尚未安装）：

npm init vite@latest
npm install

2. 创建一个组件来展示家谱树，例如FamilyTree.vue：

<template>
  <div class="family-tree">
    <TreeNode v-for="(person, index) in family" :key="person.id" :person="person" :level="0" />
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import TreeNode from './TreeNode.vue';
 
interface Person {
  id: number;
  name: string;
  children?: Person[];
}
 
export default defineComponent({
  components: {
    TreeNode
  },
  data() {
    return {
      family: [
        {
          id: 1,
          name: '张大明',
          children: [
            { id: 2, name: '张小明', children: [{ id: 3, name: '张小小明' }] },
            { id: 4, name: '张小红' },
          ],
        },
        // ... 其他家族成员
      ] as Person[],
    };
  },
});
</script>
 
<style>
.family-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

3. 创建TreeNode.vue组件来递归展示每个家谱节点的信息：

<template>
  <div>
    <div>{{ person.name }}</div>
    <div v-if="person.children && person.children.length" :style="{ marginLeft: 20 * level + 'px' }">
      <TreeNode
        v-for="(child, index) in person.children"
        :key="child.id"
        :person="child"
        :level="level + 1"
      />
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, PropType } from 'vue';
 
interface Person {
  id: number;
  name: string;
  children?: Person[];
}
 
export default defineComponent({
  props: {
    person: {
      type: Object as PropType<Person>,
      required: true,
    },
    level: {
      type: Number,
      required: true,
    },
  },
});
</script>

这个例子中，FamilyTree.vue组件定义了一个家谱树的数据结构，并使用TreeNode.vue组件来递归地显示每个家谱成员及其子孙。TreeNode组件通过一个递归组件来处理层级关系，并通过level属性来实现缩进显示，从而形成一个基本的家谱树。