el-menu导航三级数据结构及数据展示

爬坑的小白2024-12-05 9:01

1:数据展示

bash 复制代码

       <el-col>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          router
          unique-opened
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <div v-for="item in routers" :key="item.name">
            <el-submenu v-if="item.key" :index="item.url">
              <template slot="title">
                <i :class="item.icon" />
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item v-for="val in item.son" :key="val.name" 
              :index="val.url" v-if="!val.son">
                <template slot="title">
                  <i class="icon iconfont">*</i>
                  <span>{{ val.name }}</span>
                </template>
              </el-menu-item>
              <!--    三级菜单          -->
              <div v-for="i in item.son"  v-if="item.son">
              <el-submenu v-if="i.key" :index="i.url">
                <template slot="title">
                  <i :class="i.icon" />
                  <span>{{ i.name }}</span>
                </template>

                <el-menu-item v-for="v in i.son"   
                  :key="v.name":index="v.url" v-if="i.son">
                  <template slot="title">
                    <i class="icon iconfont">*</i>
                    <span>{{ v.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
              </div>

            </el-submenu>
            <el-menu-item v-else :index="item.url">
              <template slot="title">
                <i :class="item.icon" />
                <span>{{ item.name }}</span>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </el-col>

2:数据结构

bash 复制代码

data() {
    return {
      /* 这里是拿到后端返回的数据*/
      routers:[
        {
          key: true,
          name:'产品',
          son:[
            {
              key: true,
              name:'自研产品',
              son:[
                {
                  key: true,
                  name:'房型',
                  url:'/ctrip/roomType'
                },
                {
                  key: true,
                  name:'房价码',
                  url:'/ctrip/roomRateCode'
                }
              ],
              url:0
            },
            {
              key: true,
              name:'房型',
            }
          ],
          url:0
        }
      ]