Vue_3电商后台管理系统：渲染左侧菜单，获取用户列表数据

21、主页：通过双层for循环渲染左侧菜单

外层for循环用来渲染一级菜单，内层渲染for循环用来渲染二级菜单。

在一级菜单里添加v-for指令，再提供唯一的key属性。key值有id就用id。

<!-- 一级菜单 -->
<el-submenu
  v-for="item in menulist"
  :key="item.id"
>

这时候出现了五个“导航栏一”，文本都是写死的，把每个item项对应的authname属性当作名称，给span标签动态绑定名称。

<span>{{ item.authName }}</span>

这样，五个菜单就都渲染出来了。

但是展开一个菜单，其他四个也都展开了。此时，需要给这个一级菜单指定唯一的index值，按照正常逻辑，每一个菜单都有独属于自己的index值，id值就是唯一的。
但是index值只接收字符串，不接收数值，可以在后面加上一个空字符串。数值和字符串拼接，得到的是字符串。

<el-submenu
  :index="item.id + ''"
  v-for="item in menulist"
  :key="item.id"
>

这样，所有的一级菜单已经渲染出来了。

根据数据结构分析，二级菜单循环所有一级菜单的children属性。

<el-menu-item :index="subItem.id + '' " v-for="subItem in item.children" :key="subItem.id">

<span>{{subItem.authName}}</span>

22、主页：修饰选项字体、添加图标

因为每个一级菜单都是通过for循环自动生成的，如何在自动生成期间修改字体图标？如何把这些字体图标按照顺序添加给一级菜单？
可以先定义一个字体图标对象：

data() {
iconsObj:{
          '125':'iconfont icon-user',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao',
         }
      }

每循环一次会生成一个一级菜单，给一级菜单的图标动态绑定：

<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>

23、主页：每次只打开一个菜单项并解决边框问题

element-UI中的导航栏menu有这样一个属性：

unique-opened 是否只保持一个子菜单的展开 类型是布尔值，默认是false

把这个属性添加到menu上：

<el-menu
:unique-opened = "true"
>
// 也可以这样写：
<el-menu
unique-opened
>

.el-aside {
  .el-menu {
      border-right: none;
  }
}

24、主页：实现侧边栏的折叠与展开

1、先加样式，把折叠按钮显示出来。

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

2、绑定单击事件，到methods里定义，给menu加collapse折叠属性。

<el-aside>
    <div class="toggle-button" @click="toggleCollapse">|||</div>
</el-aside>

<el-menu
:collapse="isCollapse"
:collapse-transition="false" 
>
</el-menu>

3、点击按钮的时候，切换collapse的值true或false，在data( )中定义boolean值。

data() { 
//   是否折叠
isCollapse: false;
       }
methods: {
//   点击按钮，切换菜单的折叠与展开
 toggleCollapse() {
 this.isCollapse = !this.isCollapse;
 }
      		      }

4、侧边栏的高度随着isCollapse的高度而变化，如果它的值为true，说明被折叠起来了，此时宽度是小的，为64px（字体图标折叠后大小为64px）。如果值为false，说明没有被折叠。

<!-- 侧边栏区域 -->
     <el-aside :width="isCollapse ? '64px' : '200px' "> </el-aside>

25、主页：实现路由的重定向效果

要想在在home页面的main区域，显示welcome组件。

先定义welcome组件，在main的区域中放一个路由的占位符

<el-main>
   <!-- 路由占位符 -->
   <router-view></router-view>
</el-main>

再把welcome路由设置为home的子路由规则，这样就能在home页面中嵌套显示了一个welcome的字组件（定义完welcome组件后记得导入组件）

const routes = [
  {
    path: '/home', component: Home,
    redirect:'/welcome',
    children: [{
      path: '/welcome', component: Welcome
    }]
  }
]

26、主页：实现侧边栏路由链接的改造

只需把每个二级菜单改成路由链接，加router属性：

<el-menu
    :router="true"
        >
</el-menu>

<!-- 二级菜单 -->
  <el-menu-item
     :index=" '/' + subItem.path"
   >
  </el-menu-item>

通过index属性帮助跳转地址，这里我们不用id做跳转地址，用path属性做唯一的跳转路径。在控制台里检查出path前没有以“/”开头，于是我们自己加上。

27、用户列表：通过路由的形式展示用户列表组件

点击用户列表，在右侧主体区域展示用户列表对应的组件。该页面头部是面包屑导航，下面是一个卡片视图。

首先创建“用户列表”链接对应的组件页面，接下来通过路由的形式在右侧主体区展示出“用户列表”组件。先导入，再定义。
需要明白的是，用户列表组件是嵌套显示在home组件里的，所以是home里包含了一个子路由叫做用户列表。

import Users from '../components/user/Users.vue'

{
  path: '/home', component: Home,
  redirect: '/welcome',
  children: [
    { path: '/welcome', component: Welcome },
    { path: '/users', component: Users }
  ]
}

28、用户列表：在sessionStorage中保存左侧菜单的激活状态

menu的default-active属性为当前激活菜单的index，值为string。

如果想让菜单中的某一项被高亮，就把这一项对应的index值赋值为整个menu菜单的属性default-active就行了。

<el-menu :default-active="users"></el-menu>

在每次点击链接的时候，应该把对应的地址先保存到sessionStorage中，这样我们就已经先把需要激活的链接保存起来了。当我们刷新页面，可以从sessionStorage中把值取出来动态赋值给menu中的default-active属性。

<!-- 二级菜单 -->
<el-menu-item @click="saveNavState('/' + subItem.path)">

再定义这个函数：

saveNavState(activePath) {        
  // 把值保存到sessionStorage中
 window.sessionStorage.setItem("activePath", activePath);
 this.activePath = activePath;
}

这时候点击用户列表多了一个key，再把这个值重新取出来：

在data里先定义一个数据，来保存激活的链接，默认是空地址

// 被激活的链接地址
activePath: "";

把这个值动态绑定到el-menu上：

<el-menu :default-active="activePath"></el-menu>

接下来activePath赋值，在整个home组件一被创建的时候，就立即从sessionStorage中把值取出来。

created() {
  this.activePath = window.sessionStorage.getItem("activePath");
          }

需要注意的是，在点击不同链接时，也应该给activePath重新赋值，否则再点击新的列表后，点击上一次的列表就不会高亮了。

methods: {
saveNavState(activePath) {
     // 把值保存到sessionStorage中
    window.sessionStorage.setItem("activePath", activePath);
    this.activePath = activePath;
                         }
        }

小结：左侧菜单高亮效果的状态如何保持？

先在点击二级菜单的时候把对应的index值保存到sessionStorage中，当home页面刚被创建的时候立即把值取出来赋值给左侧菜单进行激活。同时，在点击每一个二级菜单的时候，还需要立即给data中的path重新赋值，这样才能实现高亮效果的动态切换。

29、用户列表：绘制用户列表组件的基础布局结构

element-UI中的面包屑导航组件：

<!-- 面包屑导航区域 -->
 <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>

element-UI中的卡片组件、input输入框组件、button组件：

<el-card>
 <el-row :gutter="20">
    <el-col :span="8">
        <el-input placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button> 
        </el-input>
    </el-col>
    <el-col :span="4">
        <el-button type="primary">添加用户</el-button>
    </el-col>
  </el-row>
</el-card>

.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
}
.el-card{
    /* 默认情况下的样式权重高于自己设置的，所以在后面加 !important*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15)!important;
}

Layout布局中的分栏间隔：Row 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。Col组件提供span属性来指定每一列之间的间隔。

30、用户列表：获取用户列表数据

data代表组件当前的私有数据，生命周期函数created，在这里发起当前组件的数据请求，methods用来定义组件当前的事件处理函数。

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数数据
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      userList:[],
      total:0 
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      });
      if ((res.meta.status !== 200)) {
        return this.$message.error("获取用户列表失败！");
      }
      this.userlist = res.data.users;
      this.total = res.data.total
      console.log(res);
    },
  },
};
</script>