Users页面

一、基本页面的实现

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

• 实现：

  • 创建user组件

  • 在home路由里的children属性里注册user组件

2、保持左侧菜单被激活时的高亮状态

• 原理：将激活菜单的index的值赋值给menu的属性default-active。

• 实现：将激活的path(index的值)保存到sessionStorage中，再从sessionStorage取出path动态赋值给default-active。

• 第一步：给el-menu-item绑定单击响应函数，传一个index值

 <el-menu-item @click="saveNavState('/'+subItem.path)">

• 第二步：定义单击响应函数，在sessionStorage里保存传入的index值

methods: {
  saveNavState(activePath) {
    window.sessionStorage.setItem('activePath', activePath);
  }
}

• 第三步：在data中定义一个数据保存这个被激活的path

data() {
  return {
   //被激活的链接地址
   activePath: ''
  };
 },

• 第四步：把这个数据动态绑定给default-active

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

• 第五步：在home一被创建立即从sessionStorage把激活的path给取出来，然后给activePath赋值上去

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

• 第六步(完善)：在点击不同的链接时，给data里的activePath重新赋值

saveNavState(activePath) {
   this.activePath = activePath;
  }

3、绘制用户列表组件的基本布局结构

• 绘制面包屑导航区域

  • 使用el-breadcrumb和breadcrumb-item组件来绘制

<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>

• 绘制卡片视图区域

  • 使用el-card组件来绘制整个卡片

  <el-card></el-card>

  • 使用el-input组件绘制搜索框

  <el-card>
      <el-input placeholder="请输入内容">
          <template #append>
              <el-button icon="el-icon-search"></el-button>
          </template>
      </el-input>
  </el-card>

  • 使用el-button组件绘制添加用户按钮

  <el-card>
      <el-input placeholder="请输入内容">
          <template #append>
              <el-button icon="el-icon-search"></el-button>
          </template>
      </el-input>
      <el-button type="primary">添加用户</el-button>
  </el-card>

  • 使用layout布局里的el-row和el-col组件来分布搜索框和添加用户按钮的位置

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