vue带连线的树形组件（升级版）

之前开源过一个简单的https://blog.csdn.net/weixin_39168678/article/details/102457894#comments树形连线组件当时没做业务剥离而且也不能无限展开，现在优化了一下。

效果

点击查询效果，以及相关配置说明

图标下载地址
css下载地址

源码
主要是递归lineItem，稍微有点基础的应该一看就明白，不明白的按照项目路径copy过去就可以用了
lineItem

<template>
  <div class="tree_item_box">
    <div
      class="column-start-start linkLine_default"
      v-for="(item,s_index) in list"
      :key="s_index"
      :class="{
   
                'linkLine_first': s_index===0&list.length>1,
                'linkLine_half_top': s_index===0&&list.length===1,
                'linkLine_last': (s_index===(list.length-1)&&s_index!==0),
                'third_layer':!item.children,
                'second_layer':item.children
        }"
    >
      <div
        class="row-flex-start basic_banner"
        @click="itemClick(item)"
        :class="{
   
          'active_color': item.expand
        }"
      >
        <div
          v-if="item.children"
          class="reTree_icon"
          :style="{height: (size||14*1.2) +'px',width: (size||14*1.2) +'px'}"
          :class="{
   
          'reTree_default_icon': item.children.length===0,
          'reTree_collapse_icon': item.expand && item.children.length>0,
          'reTree_expand_icon': !item.expand && item.children.length>0,
        }"
        ></div>
        <div
          class="layer_text nowrap"
          :class="{
   
          'active_color': item.expand
        }"
        >{
   {
   item.label}}</div>
      </div>
      <line-item
        :list="item.children"
        v-on="$listeners"
        :size="size"
        v-if="item.expand&&item.children&&item.children.length>0"
      ></line-item>
    </div>
  </div>
</template>
<script>
export default {
   
  name: "line-item",
  props: {
   
    list: {
   
      type: Array,
      default: () => {
   
        return [];
      }
    },
    size: {
   
      type: Number,
      default: 14
    }
  },
  methods: {
   
    itemClick(item) {
   
      item.expand = !item.expand;
      this.$emit("itemClick", item);
      if (!item.children) {
   
        this.$emit("valClick", item);
      }
    }
  }
};