Element NavMenu動態生成導航菜單

為了演示方便，不從數據庫獲取了

{
    "data":[
        {
            "id":125,
            "authName":"用戶管理",
            "path":"users",
            "children":[
                {
                    "id":110,
                    "authName":"用戶列表",
                    "path":"users",
                    "children":[

                    ],
                    "order":null
                }
            ],
            "order":1
        },
        {
            "id":103,
            "authName":"權限管理",
            "path":"rights",
            "children":[
                {
                    "id":111,
                    "authName":"角色列表",
                    "path":"roles",
                    "children":[

                    ],
                    "order":null
                },
                {
                    "id":112,
                    "authName":"權限列表",
                    "path":"rights",
                    "children":[

                    ],
                    "order":null
                }
            ],
            "order":2
        },
        {
            "id":101,
            "authName":"商品管理",
            "path":"goods",
            "children":[
                {
                    "id":104,
                    "authName":"商品列表",
                    "path":"goods",
                    "children":[

                    ],
                    "order":1
                },
                {
                    "id":115,
                    "authName":"分類參數",
                    "path":"params",
                    "children":[

                    ],
                    "order":2
                },
                {
                    "id":121,
                    "authName":"商品分類",
                    "path":"categories",
                    "children":[

                    ],
                    "order":3
                }
            ],
            "order":3
        },
        {
            "id":102,
            "authName":"訂單管理",
            "path":"orders",
            "children":[
                {
                    "id":107,
                    "authName":"訂單列表",
                    "path":"orders",
                    "children":[

                    ],
                    "order":null
                }
            ],
            "order":4
        },
        {
            "id":145,
            "authName":"數據統計",
            "path":"reports",
            "children":[
                {
                    "id":146,
                    "authName":"數據報表",
                    "path":"reports",
                    "children":[

                    ],
                    "order":null
                }
            ],
            "order":5
        }
    ],
    "meta":{
        "msg":"獲取菜單列表成功",
        "status":200
    }
}

組件文檔地址：https://element.eleme.cn/#/zh-CN/component/menu

全局導入及設置

import element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
Vue.use(element, axios)
Vue.prototype.$http = axios

NavMenu結構 （default-active當前激活菜單ID，index菜單唯一標志），目錄結構清楚了，v-for循環即可,子菜單循環父菜單的children

      <el-menu default-active="11">
        <el-submenu index="1">
          <!-- 一級導航 -->
          <template slot="title">
            <span>導航一</span>
          </template>
          <!-- 子導航 -->
          <el-menu-item index="11">
            <span slot="title">子導航一</span>
          </el-menu-item>
          <el-menu-item index="12">
            <span slot="title">子導航二</span>
          </el-menu-item>
          <el-menu-item index="13">
            <span slot="title">子導航三</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>

json返回格式

Vue頁面全部代碼

<template>
  <el-row>
    <el-col :span="24">
      <el-menu default-active="0">
        <el-submenu
          :index="item.id + ''"
          v-for="item in menuList"
          :key="item.id"
        >
          <template slot="title">
            <span>{{ item.authName }}</span>
          </template>
          <el-menu-item
            :index="subItem.id + ''"
            v-for="subItem in item.children"
            :key="subItem.id"
          >
            <span slot="title">{{ subItem.authName }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "about",
  data() {
    return {
      menuList: [],
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      this.$http.get("menus").then((res) => {
        console.log(res);
        if (res.data.meta.status !== 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "error",
          });
        }
        this.menuList = res.data.data;
      });
    },
  },
};
</script>
<style scoped>
.el-row {
  width: 200px;
}
</style>

菜單展示

 

菜單設置好需要鏈接到相關頁面,Menu屬性中增加router即可(是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉),但需要更改上述菜單的ID為path

<template>
  <el-row>
    <el-col :span="24">
      <el-menu default-active="0" unique-opened router>
        <el-menu-item index="0">
          <template slot="title">
            <i class="el-icon-s-home"></i>
            <router-link to="/home">首頁</router-link>
          </template>
        </el-menu-item>
        <el-submenu
          :index="'/' + item.path"
          v-for="item in menuList"
          :key="item.id"
        >
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <span>{{ item.authName }}</span>
          </template>
          <el-menu-item
            :index="'/' + subItem.path"
            v-for="subItem in item.children"
            :key="subItem.id"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">{{ subItem.authName }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

注: unique-opened 是否只保持一個子菜單的展開