菜单栏的设计

实现效果：菜单栏分为左中右三部分，从后端动态获取菜单项 填充到左右，中间部分为图片 退出 登录 下拉框

(一)vue页面的设计

1.动态获取后台数据，生成菜单项

getMenu () {    //获取菜单列表
  Vue.axios.get(config.storebaseurl + '/static/html/menuTreeListByRoleId/' + this.roleid).then(res => {
     res.data.data.forEach(item => {
        item.children = []
        if (item.levels == 1) {
           this.levelList.push(item)
        }
      });
     res.data.data.forEach(item => {
        this.levelList.forEach(data => {
           if (item.levels === 2) {
             if (item.pcode === data.code) {
                data.children.push(item)
             }
           }
        })
     })
    console.log(this.levelList, "this.levelList")
   })
},

动态获取当前项目的option选项

vue全部的div代码：

<template>
  <div>
    <div class="page_top">
      <div class="top-left">
        <div class="top_nav_left">
          <template v-for="(item,index) in levelList">
            <div class="top-image-nav"
                 menu="mainpage"
                 :key="index"
                 v-if="index<levelList.length/2">
              <p class="text">{{item.name}}</p>
              <div class="drop-down-content"
                   v-if="item.children.length>0">
                <ul class="drop-down-content_inner">
                  <li class="nav-li-one"
                      v-for="(child,i) in item.children"
                      :key="i">{{child.name}}</li>
                </ul>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="top-middle">
        <div class="top-middle-img">
          <img src="@/assets/img/HUAlong2.png"
               alt="" />
        </div>
        <div class="top-button">
          <div class="top-button-left">
            <span class="span_text">当前项目：</span>
            <template>
              <el-select v-model="proId"
                         placeholder="请选择"
                         @change="clickRecord">
                <el-option v-for="(item,index) in prolist"
                           :key="index"
                           :label="item.name"
                           :value="item"
                           :disabled="item.disabled">
                </el-option>
              </el-select>
            </template>
          </div>
          <div class="top-button-right">
            <div class="clear01">
              <img class="img1"
                   src="@/assets/img/user.png"
                   alt="" />
              <span class="span_text"
                    id="username"
                    onclick="changePwd()">{{username}}</span>
              <span id="rolename"></span>
              <a href="login.html"></a>
            </div>
            <div class="clear02">
              <span class="span_text">退出{{ name }}</span>
              <img class="img2"
                   src="@/assets/img/exit.png"
                   @click="toLogin"
                   alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="top-right"
           style="float:right">
        <div class="top_nav_right">
          <template v-for="(item,index) in levelList">
            <div class="top-image-nav"
                 menu="mainpage"
                 :key="index"
                 v-if="index>=levelList.length/2">
              <p class="text">{{item.name}}</p>
              <div class="drop-down-content"
                   v-if="item.children.length>0">
                <ul class="drop-down-content_inner">
                  <li class="nav-li-one"
                      v-for="(child,i) in item.children"
                      :key="i">{{child.name}}</li>
                </ul>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

(二)html4页面的设计