vue树状结构以及设计思路

news2025/1/16 13:53:13

在这里插入图片描述

设计思路：多级数组循环遍历，第一层样式加三角形折叠，第二层在文字前方加 —（横线），第三层加横线，第四层加点。给第二层第三层左侧加左边框，用translateY进行位移就形成了树状样式。

<template>
  <div class="video-monitor">
    <div class="column">
      <!-- 树结构 -->
      <div class="tree-list">
        <!-- 县 -->
        <div v-for="(item,index) in other.cityList" :key="index">
          <div class="flex-row cur">
            <i class="el-icon-caret-right"></i>
            <span>{{item.label}}</span>
          </div>
          <div v-if="item.child" class="son">
            <!-- 镇 -->
            <div v-for="(itm, ind) in item.child" :key="ind">
              <div class="flex-row">
                <div class="line"></div>
                <span>{{itm.label}}</span>
              </div>
              <div v-if="itm.child" class="son" style="margin: 8px 0 0 20px">
                <!-- 村 -->
                <div v-for="(i, d) in itm.child" :key="d">
                  <div class="flex-row">
                    <div class="line"></div>
                    <span>{{i.label}}</span>
                  </div>
                  <div v-if="i.child" class="son" style="margin: 8px 0 0 24px">
                    <!-- 摄像头 -->
                    <div v-for="(q, t) in i.child" :key="t" class="flex-row">
                      <div class="spot"></div>
                      <span>{{q.label}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "VideoMonitor",
  data() {
    return {
      other: {
        cityList: [
          {id:1, label: '肥东县', child: [
            {id:'1-1', label: '店埠镇', child: [
              {id: '1-1-1', label: '仰桥村'},
              {id: '1-1-2', label: '仰桥村', child: [
                {id: '1-1-1-1', label: '45-村委会1号摄像头'},
                {id: '1-1-1-2', label: '45-村委会1号摄像头'}
              ]}]},
            {id:'1-2', label: '店埠镇'},
            {id:'1-3', label: '店埠镇'}
          ]},
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.video-monitor {
  display: flex;
  height: 100%;
  /* 树形结构 */
  .tree-list {
    padding: 38px 10px 0 22px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    .son {
      margin-left: 8px;
      border-left: 1px solid #CCCCCC;
      .flex-row {
        padding: 16px 0 0;
        transform: translateY(9px);
      }
      .spot {
        width: 5px;
        height: 5px;
        margin
        background-color: #CCCCCC;
        border-radius: 50%;
      }
      .line {
        width: 15px;
        height: 1px;
        margin-right: 4px;
        background-color: #cccccc;
      }
    }
  }
  /* 公用样式 */
  .column {
    width: 300px;
    height: 100%;
    background-color: #fff;
  }
  .flex-row {
    display: flex;
    align-items: center;
  }
  .flex-jus {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cur {
    cursor: pointer;
  }
}
</style>