vue 带线树形结构

效果图如下：

实现思路：

结构方面使用 组件的递归， 线条使用before，after这俩伪类元素，然后定位上去

代码：

<template>
  <div>
    <ul class="all-list">
      <li v-for="(item, i) in list" :key="i">
        <div class="tree-item expend">
          <!-- 使用vuex保存选中状态，勾选父组件，自动选中其全部子组件 -->
          <input type="checkbox" :checked="$store.state.checkboxIds.includes(item.id)" @click="changeBox(item)" v-if="item.type !== 1" />
          <div
            v-if="item.type !== 3"
            class=" icon-size"
            :class="openArr.includes(i) ? 'reduce-icon' : 'expend-icon'&#