一、动态生成后台管理左侧菜单
模板:
<el-submenu :index="item.id+''" v-for="item in MenusList" :key="item.id">
<template slot="title">
<i class="el-icon-user-solid"></i>
<span>{
{ item.authName }}</span>
</template>
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
<i class="el-icon-menu"></i>
<span>{
{ subItem.authName }}</span>
</el-menu-item>
</el-submenu>
JS:
async getLeftMenus() {
//调左侧菜单权限接口
const res=await getLeftMenusAPI()
console.log('调左侧菜单权限接口',res)
this.MenusList=res;
}
二、点击左侧菜单内容,右侧展示对应内容
第一步:设置el-menu的路由模式为true
<el-menu :router="true" ></el-menu>
第二步:给对应子菜单通过index添加路由路径
<el-menu-item index="'路径"></el-menu-item>
三、用户列表组件的实现
1、 用户列表结构
2、 面包屑导航
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
3、 搜索和添加用户功能
<el-form>
<el-input
placeholder="请输入内容"
v-model="input3"
cla