后台管理的增删改查

1.动态生成后台管理左侧菜单

 模板：
 <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;
    }

2.点击左侧菜单内容，右侧展示对应内容

  第一步：设置el-menu的路由模式为true
     <el-menu :router="true" ></el-menu>
     
  第二步：给对应子菜单通过index添加路由路径
   <el-menu-item index="'路径"></el-menu-item>

3.用户列表组件的实现

3.1 用户列表结构

3.1.1 面包屑导航

  <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.1.2 搜索和添加用户功能

<el-form>
  <el-input
  placeholder="请输入内容"
  v-model="input3