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

本文链接：https://blog.youkuaiyun.com/tt75281920/article/details/118862185

这篇博客主要介绍了如何在Vue项目中实现电商管理系统的用户列表功能，包括通过路由展示列表组件、在sessionStorage中保存菜单激活状态、绘制列表布局、获取用户数据、使用el-table组件、添加索引列、渲染操作列、实现分页和搜索功能，并详细讲解了每个步骤的操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1 整体布局

在这里插入图片描述

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");