要在Vite和TypeScript中实现家谱树，你可以使用一个简单的组件来展示层级数据。以下是一个简单的例子：
- 安装Vite和TypeScript的依赖（如果尚未安装）：
npm init vite@latest
npm install
- 创建一个组件来展示家谱树，例如
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>
- 创建
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属性来实现缩进显示，从而形成一个基本的家谱树。