用vue3+ts封装一个树形结构组件

以下是一个简单的树形结构组件的示例代码：

import { defineComponent, PropType } from 'vue';

interface TreeNode {
  label: string;
  children?: TreeNode[];
}

export default defineComponent({
  name: 'Tree',
  props: {
    treeData: {
      type: Array as PropType<TreeNode[]>,
      required: true,
    },
  },
  setup(props) {
    const renderTree = (nodes: TreeNode[]) => {
      return nodes.map(node => {
        return (
          <li>
            <span>{node.label}</span>
            {node.children && <ul>{renderTree(node.children)}</ul>}
          </li>
        );
      });
    };

    return () => {
      return <ul>{renderTree(props.treeData)}</ul>;
    };
  },
});

在上述代码中，定义了一个名为 `Tree` 的组件，接收一个名为 `treeData` 的属性，类型为一个以 `TreeNode` 数据结构为元素的数组。 `TreeNode` 包含一个 `label` 属性和一个可选的 `children` 属性，后者也是一个 `TreeNode` 数组。

组件的 `setup` 函数中定义了一个名为 `renderTree` 的递归函数，用于渲染树。 `renderTree` 函数接收一个 `TreeNode` 数组作为参数，在每个循环中，对于每个节点，它会返回一个 `<li>` 元素，包含节点的 `label` 属性以及如果节点有子节点则渲染一个 `<ul>` 元素并通过递归调用 `renderTree` 函数渲染该子节点。

最后，返回一个包含一个树形结构的 `<ul>` 元素，其中包含调用 `renderTree` 函数所得到的结果。