vue 左侧菜单根据数据渲染成菜单

最新推荐文章于 2024-08-07 23:19:53 发布

一个走在路上的人

最新推荐文章于 2024-08-07 23:19:53 发布

阅读量601

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39673475/article/details/121660886

版权


<el-menu
      :default-active="onRoutes"
      class="el-menu-vertical-demo leftnavs"
      :collapse="isCollage"
      router
    >
      <h3 :class="isCollage === false ? 'logo':'islogo'">
        <img :src="leftlogoImg" alt="">
      </h3>
      <template v-for="item in navData">
        <template v-if="item.SubItems.length > 0">
          <el-submenu :index="item.ItemId" :key="item.ItemId">
            <template slot="title">
              <!-- <i :class="'iconfont ' + item.icon"></i> -->
              <span slot="title" class="infotsy" >{{ item.ItemName }}</span>
            </template>
            <template v-for="subItem in item.SubItems">
              <el-submenu
                v-if="subItem.SubItems.length > 0"
                :index="subItem.ItemId"
                :key="subItem.ItemId"
              >
                <template slot="title">
                  <!-- <i :class="'iconfont ' + subItem.icon"></i> -->
                  <span slot="title" v-if="subItem.Url=='OilProdPlat'|| subItem.Url=='WaterRatePlat'" @click="wellToggle(subItem)">{{ subItem.ItemName }}</span>
                  <span slot="title" v-else >{{ subItem.ItemName }}</span>
                </template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.SubItems"
                  :key="i"
                  :index="threeItem.Url+'?ItemId='+threeItem.ItemId+'&parentItemId='+subItem.ItemId+'&parentItemName='+subItem.ItemName+'&ItemName='+threeItem.ItemName"
                  >{{ threeItem.ItemName }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                v-else
                :index="subItem.Url+'?ItemId='+subItem.ItemId"
                :key="subItem.ItemId"
>
                <template slot="title">
                  <!-- <i :class="'iconfont ' + subItem.icon"></i> -->
                  <span slot="title">{{ subItem.ItemName }}</span>
                </template>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.Url" :key="item.ItemId">
            <!-- <i :class="'iconfont ' + item.icon"></i> -->
            <span slot="title">{{ item.ItemName }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>