有vue3加ts写一个树形目录

在Vue 3中结合TypeScript编写树形目录组件通常涉及以下几个步骤：

1. 安装依赖：首先需要安装`vue`, `vue-router`, 和 TypeScript相关的库，如`@vue/cli-plugin-typescript`。通过运行`npm install`或`yarn add`来安装。

2. 创建数据模型：定义一个树节点的数据结构，可以包含`id`, `name`, `parent`等属性，以及可能的状态或额外的信息，例如`expanded`标志表示是否展开。

interface TreeNode {
  id: string;
  name: string;
  parent?: string | null;
  children?: TreeNode[] | undefined;
}

3. 组件模板：创建一个名为`TreeComponent.vue`的文件，使用`v-for`遍历节点数组，展示层级关系，并处理展开和折叠操作。

<template>
  <ul>
    <li v-for="(node, index) in nodes"
        :key="index"
        :class="{ expanded: isExpanded(node.id) }">
      {{ node.name }}
      <ul v-if="node.children">
        <TreeItem v-for="(child, childIndex) in node.children"
                  :key="childIndex"
                  :node="child"/>
      </ul>
    </li>
  </ul>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue';
import TreeNode from './TreeNode';

@Component
export default class TreeComponent extends Vue {
  public nodes: TreeNode[];

  // 示例中假设有一个全局函数isExpanded用于判断节点是否展开
  public isExpanded(nodeId: string): boolean {
    // 实现逻辑...
  }

  // 如果需要，也可以在此处添加方法来处理点击事件、切换节点状态等
}
</script>

4. 配置TS：在`.d.ts`配置文件中，声明组件的对外API和props类型。

// components/TreeComponent.d.ts
import { Component } from 'vue';

export interface TreeComponentProps {
  nodes: TreeNode[];
}

export default class extends Component<TreeComponentProps> {}

5. 使用组件：在其他组件中引入并传递树节点数据给`TreeComponent`。

import TreeComponent from '@/components/TreeComponent.vue';

export default {
  components: {
    TreeComponent,
  },
  data() {
    return {
      treeData: [
        {/* 树形目录节点数据 */}
      ],
    };
  },
};