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

好的，针对你的问题，我可以给你提供一些思路和代码示例。

1. 首先，我们需要创建一个 Vue 组件，可以使用 Vue3 提供的 defineComponent 函数来创建组件：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TreeComponent',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    // ... 这里可以写组件的逻辑
  }
})

2. 接着，我们需要在组件中渲染出树形结构。这里可以使用递归的方式来渲染：

<template>
  <div class="tree">
    <ul>
      <li v-for="item in data" :key="item.id">
        <div class="node" @click="toggle(item)">
          <span>{{ item.label }}</span>
          <span v-if="item.children && item.children.length" :class="{'rotate': item.open}">
            <i class="iconfont icon-arrow-down"></i>
          </span>
        </div>
        <TreeComponent v-if="item.children && item.children.length && item.open" :data="item.children" />
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import TreeComponent from './TreeComponent.vue';

export default defineComponent({
  name: 'TreeComponent',
  components: {
    TreeComponent
  },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const toggle = (item) => {
      item.open = !item.open;
    };

    return {
      toggle
    };
  }
})
</script>

<style>
.tree {
  .node {
    display: flex;
    align-items: center;
    cursor: pointer;
    .iconfont {
      margin-left: 5px;
    }
    &.rotate {
      .iconfont {
        transform: rotate(180deg);
      }
    }
  }
}
</style>

3. 最后，我们需要在组件中添加连线效果。可以使用 CSS 来实现：

.tree {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    bottom: 0;
    width: 2px;
    background-color: #c6c6c6;
  }
  ul {
    padding-left: 30px;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: -15px;
      width: 15px;
      height: 100%;
      border-left: 2px dashed #c6c6c6;
    }
  }
  li:last-child {
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -15px;
      width: 15px;
      height: 50%;
      border-left: 2px dashed #c6c6c6;
    }
  }
}

以上就是一个简单的树形组件的实现。希望能对你有所帮助！