vue3封装一个树形的组件，左侧有线连接的

树形结构可以使用递归组件来实现，通过 props 传递数据，然后递归渲染子组件。在 Vue3 中可以使用 `teleport` 将组件的内容传送到目标 DOM 节点中，这个特性可以用来实现左侧有线连接的效果。下面是一个简单的示例代码：

<template>
  <div class="tree">
    <template v-for="(item, index) in data">
      <tree-node
        :key="index"
        :item="item"
        :is-last="index === data.length - 1"
      />
      <teleport to="body">
        <div
          :key="`line-${index}`"
          class="line"
          :class="{ last: index === data.length - 1 }"
        />
      </teleport>
    </template>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: {
    TreeNode,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
}
</script>

<style scoped>
.tree {
  position: relative;
}

.line {
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  height: 100%;
  border-left: 1px solid #ccc;
}

.line.last {
  height: 50%;
}
</style>

在这个示例中，`data` 是一个包含树形结构数据的数组，`TreeNode` 组件是递归组件，`is-last` 属性用来判断当前节点是否是最后一个节点，然后通过 `teleport` 将线连接的 DOM 节点传送到目标位置，使用绝对定位来控制位置和大小。