vue3+ts+elementPlus tree封装

好的，我会尽力回答你的问题。

首先，Element Plus 是一个基于 Vue 3 的 UI 组件库，而 TypeScript 则是一种强类型的 JavaScript 扩展语言。在 Vue 3 中，我们可以通过 Composition API 来编写组件。

针对你的需求，我们可以封装一个 Tree 组件，代码如下：

<template>
  <el-tree :data="data" :props="props" :expand-on-click-node="false" @node-click="handleNodeClick">
    <slot name="default" v-bind="{ node, data }" />
  </el-tree>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ElTree } from 'element-plus'

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

interface Props {
  data: TreeNode[]
  props: Record<string, any>
}

export default defineComponent({
  name: 'MyTree',
  components: { ElTree },
  props: {
    data: { type: Array as PropType<TreeNode[]>, required: true },
    props: { type: Object as PropType<Record<string, any>>, default: () => ({ label: 'label', children: 'children' }) },
  },
  setup(props: Props, { emit }) {
    const handleNodeClick = (data: any, node: any, instance: any) => {
      emit('node-click', data, node, instance)
    }

    return {
      handleNodeClick,
    }
  },
})
</script>

在这个组件中，我们使用了 Element Plus 的 `el-tree` 组件，并使用了 `slot` 来插入自定义节点内容。通过 TypeScript 的类型定义，我们可以确保传入的 `data` 和 `props` 属性是正确的格式。同时，我们为 `node-click` 事件添加了一个自定义的处理函数。

使用这个组件的方式非常简单：

<template>
  <my-tree :data="data" @node-click="handleNodeClick">
    <template #default="{ node, data }">
      <span>{{ node.label }}</span>
    </template>
  </my-tree>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MyTree from '@/components/MyTree.vue'

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

export default defineComponent({
  components: { MyTree },
  setup() {
    const data: TreeNode[] = [
      {
        label: '一级 1',
        children: [
          {
            label: '二级 1-1',
            children: [
              { label: '三级 1-1-1' },
              { label: '三级 1-1-2' },
            ],
          },
          {
            label: '二级 1-2',
            children: [
              { label: '三级 1-2-1' },
              { label: '三级 1-2-2' },
            ],
          },
        ],
      },
      {
        label: '一级 2',
        children: [
          {
            label: '二级 2-1',
            children: [
              { label: '三级 2-1-1' },
              { label: '三级 2-1-2' },
            ],
          },
          {
            label: '二级 2-2',
            children: [
              { label: '三级 2-2-1' },
              { label: '三级 2-2-2' },
            ],
          },
        ],
      },
    ]

    const handleNodeClick = (data: any, node: any, instance: any) => {
      console.log('node-click', data, node, instance)
    }

    return {
      data,
      handleNodeClick,
    }
  },
})
</script>

在这个示例中，我们使用了自定义的 `MyTree` 组件，并在 `slot` 中渲染了节点的标签文本。

希望这个示例能够帮助到你。如果你还有其他问题，可以随时问我。