笔记5：主页布局-用户列表【Vue实战项目：电商管理系统（Element-UI）】

快来打我* 2022-08-30 00:48 192阅读 0赞

### 文章目录 ###

*   *  1 整体布局
     *  2 完成用户列表
     *   *  2.1 通过路由的形式展示列表组件
         *  2.2 在sessionStorage中保存左侧菜单的激活状态
         *  2.3 绘制用户列表组件的基础布局结构
         *  2.4 获取用户列表数据
         *  2.5 使用el-table组件渲染基本的用户列表
         *  2.6 添加索引列
         *  2.7 通过作用域插槽渲染操作列
         *  2.7 通过作用域插槽渲染操作列
         *  2.8 实现分页效果
         *  2.9 修改用户状态
         *  2.10 实现搜索功能

## 1 整体布局 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]

## 2 完成用户列表 ##

### 2.1 通过路由的形式展示列表组件 ###

*  创建Users页面：`/components/user/Users.vue`

<template>
        <div>
            <h3>用户组件列表</h3>
        </div>
    </template>
    
    <script>
    export default { 
        
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>

*  设置路由

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '../components/Login.vue'
    import Home from '../components/Home.vue'
    import Welcome from '../components/Welcome.vue'
    import Users from '../components/user/Users.vue'
    
    Vue.use(Router)
    
    
    const router = new Router({ 
      routes: [
        {  path: '/', redirect: '/login' },
        {  path: '/login', component: Login },
        { 
          path: '/home', component: Home, redirect: '/welcome', children: [
            {  path: '/welcome', component: Welcome },
            {  path: '/users', component: Users }
          ]
        }
      ]
    })

### 2.2 在sessionStorage中保存左侧菜单的激活状态 ###

实现任何情况下，均能正常展示二级菜单的激活状态

*  定义一个变量记录激活的二级菜单的index

data() { 
    return { 
      ...
      activiPath: "",
    };

*  在`element ui`的`menu`中属性`default-active`能展示当前激活的菜单

<el-menu ... :default-active="activiPath">

*  二级菜单绑定点击方法

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

*  实现该点击方法，将点击后的路径保存

// 保存二级菜单激活状态
    saveNavState(activiPath) { 
      window.sessionStorage.setItem("activiPath", activiPath); // 将路径保存到sessionStorage中
      this.activiPath = activiPath; // 给公共变量赋值
    },

*  在创建页面时赋值（刷新页面的情况）

created() { 
        this.getMenuList();
        this.activiPath = window.sessionStorage.getItem("activiPath");
    },

### 2.3 绘制用户列表组件的基础布局结构 ###

*  `Users.vue`中添加面包屑导航，卡片样式，输入框和按钮：

<template>
      <div>
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    
        
        <el-card>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <div>
                <el-input placeholder="请输入搜索内容">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </el-col>
            <el-col :span="16">
              <div>
                <el-button type="primary">添加用户</el-button>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </template>
    
    <script>
    export default { };
    </script>
    
    <style lang="less" scoped>
    </style>

*  `elements.vue`中导入对应的组件

import {  Breadcrumb, BreadcrumbItem, Card, Row, Col } from 'element-ui'
    
    Vue.use(Breadcrumb)
    Vue.use(BreadcrumbItem)
    Vue.use(Card)
    Vue.use(Row)
    Vue.use(Col)

*  `global.css`设置全局`glob`设置面包屑和卡片的全局样式

.el-breadcrumb { 
      margin-bottom: 15px;
      font-size: 12px;
    }
    
    .el-card { 
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;  /* 卡片阴影 */
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]

### 2.4 获取用户列表数据 ###

*  接口`\users`接口获取用户数据
 *  实现

### 2.5 使用el-table组件渲染基本的用户列表 ###

*  实现

<el-table :data="userlist" stripe border>
            <el-table-column prop="username" label="姓名"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column prop="mobile" label="电话"> </el-table-column>
            <el-table-column prop="role_name" label="角色"> </el-table-column>
            <el-table-column label="状态"> </el-table-column>
            <el-table-column label="操作"> </el-table-column>
    </el-table>

设置全局样式

.el-table{ 
      margin-top: 15px;
      font-size: 12px;
    }

### 2.6 添加索引列 ###

*  在表格的第一列添加

<el-table-column type="index" label="序号"> </el-table-column>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]

### 2.7 通过作用域插槽渲染操作列 ###

实现状态

> scope.row可以打印出该行的所有数据

<el-table-column label="状态">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state"> </el-switch>
      </template>
    </el-table-column>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]

### 2.7 通过作用域插槽渲染操作列 ###

<el-table-column label="操作" width="180px"> 
        <template>
            
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            
            <el-tooltip class="item" effect="dark" content="设置按钮" placement="top" :enterable="false">
                <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>     
        </template>
    </el-table-column>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]

### 2.8 实现分页效果 ###

*  布局实现

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

*  监听方法实现

// 监听 pagesize改变的事件
    handleSizeChange(newSize) { 
      this.queryInfo.pagesize = newSize;
      this.getUserList();
    },
    // 监听页码值改变的时间
    handleCurrentChange(newPage) { 
      this.queryInfo.pagenum = newPage;
      this.getUserList();
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 5]

### 2.9 修改用户状态 ###

*  `switch`开关绑定`change`事件

<el-switch  v-model="scope.row.mg_state" @change="userStateChanged(scope.row)" >
    </el-switch>

*  实现方法

> 更改用户状态接口：1.3.3. 修改用户状态`users/:uId/state/:type`  
> 为了拼接参数，put传参使用\`\`来拼接参数

async userStateChanged(userinfo) { 
      const {  data: res } = await this.$http.put(
        `users/${ userinfo.id}/state/${ userinfo.mg_state}`
      );
      if (res.meta.status !== 200) { 
        userinfo.mg_state = !userinfo.mg_state;
        return this.$message.error("设置状态失败！");
      }
    },

### 2.10 实现搜索功能 ###

*  搜索功能

<el-input placeholder="请输入搜索内容" v-model="queryInfo.query" >
      <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
    </el-input>

*  清空搜索框功能

> 使用`clearable`属性即可得到一个可清空的输入框  
> 在点击由`clearable`属性生成的清空按钮时触发`clear`事件

<el-input ... clearable @clear="getUserList()">

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]: /images/20220829/044324548ce24c96bc0a1bef498f9637.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/29c5c14b64f24e919b9b476d1323634e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/5222fcb7cecf4c18ba39813c14a1ecde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/e5c8fb2b225f44508b9bba8b1cfb49b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]: /images/20220829/f38976d7302b48b283de4f6f27791271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 5]: /images/20220829/8b16e39ab4c5431490e6d84f24af8354.png