vue3 数据大屏 项目开发中，需要菜单列表，这里我们整理菜单列表

效果截图

使用实例

组件代码

<template>
  <div class="menuCom hideScrollBar">
    <div class="level" v-for="(item,index) in list" :key="index">
      <div class="title cur" @click="item.expansion=!item.expansion">
        <div class="titlel">{{ item.title }}</div>
        <div class="icon" :class="{active:item.expansion}">
          <img src="./assets/icon_down.png" alt="">
        </div>
      </div>
      <div class="levelChild" v-if="item.expansion">
        <div class="level2" v-for="(item2,index2) in item.childList"
             :key="index2">
          <div class="title cur" @click="item2.expansion=!item2.expansion">
            <div class="titlel">{{ item2.title }}</div>
            <div class="icon" :class="{active:item2.expansion}">
              <img src="./assets/icon_down.png" alt="">
            </div>
          </div>
          <div class="levelChild" v-if="item2.expansion">
            <div class="level3" v-for="(item3,index3) in item2.childList"
                 :key="index3">
              <div class="title cur">
                <div class="titlel">{{ item3.title }}</div>
                <div class="icon">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "menuCom",
  components: {},
  data() {
    return {
      list: [
        {
          title: '鄂托克旗',
          expansion: true,
          childList: [
            {
              title: '蒙西镇',
              expansion: true,
              childList: [{
                title: '伊克布拉格嘎查'
              }, {
                title: '巴音温都尔噫查'
              }, {
                title: '渠畔村'
              }, {
                title: '新民村'
              }, {
                title: '蒙西社区'
              }, {
                title: '苏亥图嘎查'
              }, {
                title: '羊场村'
              }, {
                title: '碱柜村'
              }, {
                title: '其劳图村'
              }, {
                title: '隆安社区'
              },]
            },
            {
              title: '棋盘井镇',
              expansion: true,
              childList: [{
                title: '额尔和图嘎查'
              }, {
                title: '伊克达赖嘎查'
              }, {
                title: '百眼井村'
              }, {
                title: '苏米图村'
              }, {
                title: '梦翔社区'
              }, {
                title: '艾力社区'
              }, {
                title: '草籽场社区'
              }, {
                title: '呼古嘎查'
              }, {
                title: '乌仁都喜嘎查'
              }, {
                title: '深井村'
              }, {
                title: '楚鲁拜嘎查'
              },]
            },
          ]
        },
      ]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.cur {
  cursor: pointer;
}

.menuCom {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: scroll;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    height: 33px;

    .titlel {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #FFFFFF;
    }

    .icon {
      width: 11px;
      transition: all 0.6s;
      transform: rotateZ(180deg);

      img {
        width: 11px;
        height: 7px;
      }
    }

    .icon.active {
      transform: rotateZ(360deg);
    }
  }

  .level {
    width: 100%;
    margin-bottom: 6px;
  }

  .level2 {
    margin-left: 16px;

    .titlel {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }

  .level3 {
    margin-left: 16px;

    .titlel {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #B6C5E5;
    }
  }
}

.levelChild {
  transition: all 0.6s;
}
</style>