树状结构

<template>
        <div class="linellae">
          <div v-for='(items, index) in lists' :key='index'>
            <van-row type="flex" justify="space-around" :class="items.val === true ? 'alignItems1' : 'alignItems3'">
              <span></span>
              <b></b>
              <van-col span="8" :class="items.val === true ? 'alignItemsButton' : 'alignItemsDefaultButton'">{{items.text}}</van-col>
              <van-col span="4" :class="items.val === true ? 'vanCol' : 'vanCol1'"><span> · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·</span></van-col>
              <van-col span="12"><div v-if='items.val'>{{items.text}}</div></van-col>
            </van-row>
            <template>
              <div>
                <van-row type="flex" justify="space-around"  v-for='(item, indexI) in items.children' :key='indexI' :class="item.val === true ? 'alignItems' : 'alignItems2'">
                  <span></span>
                  <b></b>
                  <van-col span="9" offset='1' :class="item.val === true ? 'alignItemsButton' : 'alignItemsDefaultButton'" >{{item.text}}</van-col>
                  <van-col span="2" :class="item.val === true ? 'vanCol' : 'vanCol1'"><span> · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·</span></van-col>
                  <van-col span="12"><div v-if='item.val'>{{item.text}}</div></van-col>
                </van-row>
              </div>
            </template>
          </div>
        </div>
      </template>





lists: [
          {
            text: '广东省广东省',
            val: true,
            children: [
              {
                text: '刚的广的广东省',
                val: true
              },
              {
                text: '粉丝刚更更粉丝刚',
                val: true
              },
              {
                text: '刚的广的广东省',
                val: false
              }
            ]
          },
          {
            text: '地方个广东省',
            val: false,
            children: [
              {
                text: '刚的广东省',
                val: false
              },
              {
                text: '更多粉丝刚',
                val: false
              },
              {
                text: '地方个',
                val: false
              }
            ]
          },
          {
            text: '地方个广东省',
            val: false,
            children: [
              {
                text: '刚的广东省',
                val: false
              },
              {
                text: '更多粉丝刚',
                val: false
              },
              {
                text: '地方个',
                val: false
              }
            ]
          },
          {
            text: '地方个广东省',
            val: false,
            children: [
              {
                text: '刚的广东省',
                val: false
              },
              {
                text: '更多粉丝刚',
                val: false
              },
              {
                text: '地方个',
                val: false
              }
            ]
          },
          {
            text: '地方个广东省',
            val: false,
            children: [
            ]
          },
          {
            text: '地方个广东省',
            val: false,
            children: [
              {
                text: '刚的广东省',
                val: false
              },
              {
                text: '更多粉丝刚',
                val: false
              },
              {
                text: '地方个',
                val: false
              }
            ]
          },
          {
            text: '地',
            val: false,
            children: [
              {
                text: '刚的广东省',
                val: false
              },
              {
                text: '更多粉丝刚',
                val: false
              }
            ]
          },
          {
            text: '地东省',
            val: false,
            children: [
              {
                text: '刚的广东省',
                val: false
              }
            ]
          }
        ],

最主要的就是css了 看代码

.Gantt {
      border-left: 1px solid #707070
    }
    .linellae {
      position: relative;
      list-style-type: none;
      padding: 0px;
      height: calc(100vh - 0.98rem - 2.78rem);
      max-height: calc(100vh - 0.98rem - 2.48rem);
      overflow: auto;
    }
    .alignItems, .alignItems1, .alignItems2, .alignItems3 {
      align-items: center;
      margin-bottom: 0.1rem;
      position: relative;
      margin-left: 0.5rem
    }
    .vanCol, .vanCol1 {
      overflow: hidden;
    }
    .vanCol span {
      display: block;
      width:200vw;
    }
    .vanCol1 span {
      display: block;
      width:200vw;
      color:#b5b5b5
    }
    .alignItems>b:before {
      content: '';
      position: absolute;
      left: -0.2rem;
      width: 8vw;
      height: 1px;
      background: #4c4c4c;
    }
    .alignItems>span:before {
      content: '';
      position: absolute;
      top: -0.38rem;
      left: -0.2rem;
      width: 1px;
      height: 0.66rem;      
      background: #4c4c4c;
    }

    .alignItems1 span:before {
      position: absolute;
      height: 1px;
    }
    .alignItems1>b:before {
      content: '';
      position: absolute;
      left: -0.5rem;
      width: 8vw;
      height: 1px;
      background: #4c4c4c;
    }
    .alignItems1>span:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: -4.7rem;
      left: -0.5rem;
      width: 1px;
      height: 5rem;
      background: #4c4c4c;
    }
    .alignItems3>b:before {
      content: '';
      position: absolute;
      left: -0.5rem;
      width: 8vw;
      height: 1px;
      background: #9c9c9c;
    }
    .alignItems3>span:before {
      content: '';
      position: absolute;
      top: -4.7rem;
      left: -0.5rem;
      width: 1px;
      height: 5rem;
      background: #9c9c9c;
    }
    .alignItems2>b:before {
      content: '';
      position: absolute;
      left: -0.2rem;
      width: 8vw;
      height: 1px;
      background: #9c9c9c;
    }
    .alignItems2>span:before {
      content: '';
      position: absolute;
      top: -0.38rem;
      left: -0.2rem;
      width: 1px;
      height: 0.66rem;
      background: #9c9c9c;
    }
    .alignItemsDefault{
      color:#b5b5b5!important;
    }
    .alignItemsButton {
      padding: 0 8px;
      height: .55rem;
      line-height: .55rem;
      color: #323233;
      background-color: #fff;
      border: 1px solid #313131;
      display: inline-block;
      position: relative;
      border-radius: 2px;
      text-align: center;
      box-sizing: border-box;
      -webkit-appearance: none;
    }
    .alignItemsDefaultButton {
      padding: 0 8px;
      height: .55rem;
      line-height: .55rem;
      color: #9c9c9c;
      background-color: #fff;
      border: 1px solid #9c9c9c;
      display: inline-block;
      position: relative;
      border-radius: 2px;
      text-align: center;
      box-sizing: border-box;
      -webkit-appearance: none;
    }