element 动态导航渲染及数据案例

element 导航实现基于elemenet实现使用前请确保已成功引入

html 部分

<!--侧边栏菜单-->
      <el-menu background-color="inherit" text-color="#fff" active-text-color="#fff" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
        <template v-for="item in menuList">
          <el-submenu :index="item.menuId" :key="item.menuId" v-if="!item.actionName">
            <!--一级菜单的模板区域-->
            <template slot="title">
              <!--图标-->
              <i :class="iconStyle(item.menuName)"></i>
              <!--文本-->
              <span>{{ item.menuName }}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item :index="subItem.actionName" v-for="subItem in item.menuList" :key="subItem.menuId" @click="saveNavState(subItem.actionName)">
              <template slot="title">
                <!--图标-->
                <i class="el-icon-s-operation"></i>
                <!--文本-->
                <span>{{ subItem.menuName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-menu-item v-else :index="item.actionName" :key="item.menuId" @click="saveNavState(item.actionName)">
            <template slot="title">
              <!--图标-->
              <i class="el-icon-s-home" style="color:#fff"></i>
              <!--文本-->
              <span>{{ item.menuName }}</span>
            </template>
            <router-link :to="'/Main'" v-show="isCollapse"><i class="el-icon-s-home" style="color:#fff"></i></router-link>
          </el-menu-item>
        </template>
      </el-menu>

js 部分

  data() {
    return {
      menuList: [],
    }
  },
 created() {
// 引入本地json 数据
   var  goodsData = require( './data.json' )
     this.menuList = goodsData
  },

data 文件

[
  {
    "actionName":"Main",  
    "menuId": "QLJY_Main",
    "menuName": "首页",
   " parentMenuId": "BS_ROOT",
  "  webSiteId": "QLJY"
  },
  {
   " menuId": "QLJY_SysMGT",
    "menuList": [
        { 
            "actionName": "OrgMGT",
            "menuId": "QLJY_OrgMGT",
            "menuName": "组织管理",
            "parentMenuId": "QLJY_SysMGT",
            "webSiteId": "QLJY"
        },
        {
           "actionName": "RoleMGT",
            "menuId": "QLJY_RoleMGT",
           "menuName": "小姐姐啊",
            "parentMenuId": "QLJY_SysMGT",
           " webSiteId": "QLJY"
        }
    ],
   "menuName": "系统管理",
    "parentMenuId": "BS_ROOT",
    "webSiteId": "QLJY"
  }
]