开始啦

父组件

   <TreeItem 
       v-for="item in treeList" :key="item.index" 
       :children="item.children"  :label="item.label"
       :itemChild="item" :level="item.level" :depth="0">
   </TreeItem>
        

子组件

 <template>
  <div class="tree-item">
    <div :style="indent" v-if="level" style="cursor:pointer ;">
      <div @click="toggleChildren(itemChild)">
        <img v-if="level < 4" src="../../../assets/img/arrow_bottom.png" alt=""
          :class="showChildren ? 'vertical' : 'normal'" class="icon">
          {{ label }}
        </span>
      </div>
    </div>
    <!-- 递归 -->
    <div v-if="showChildren">
      <TreeItem v-for="item in children" :key="item.index" :children="item.children" :label="item.label"
        :itemChild="item" :level="item.level" :depth="depth + 1">
      </TreeItem>
    </div>
  </div>
</template>
 <script>
export default {
  name: "TreeItem",
  props: ["label", "children", "depth", "level", "itemChild"],
  data () {
    return { showChildren: false };
  },
  computed: {
    indent () {
      return { transform: `translate(${this.depth * 6}px)` };
    },
  },
  methods: {
    toggleChildren (itemChild) {
      console.log(itemChild)
      this.showChildren = !this.showChildren;
    },
  },
};
</script>
<style lang="scss" scoped>
.anime_time {
  transition: all 0.1s;
}

.tree-item {
  .icon {
    width: 14px;
    height: 14px;
    transform: rotate(-90deg);

    &.vertical {
      transform: rotate(0deg);
      @extend .anime_time;
    }

    &.normal {
      @extend .anime_time;
    }
  }
}
</style>

浅浅总结一下 之后会记录毫不相关的扁平数组如何处理成树形结构