VUE项目实战21用户列表开发-基本UI布局

Posted 2021-12-23 光仔December

接上篇《20、实现首页路由重定向及左侧菜单路由链接》
上一篇我们实现了首页的路由重定向，以及左侧菜单改造为路由链接的效果。本篇我们来正式实现菜单的第一个功能，用户列表。

一、需要实现的效果

我们最终要实现的用户列表的效果，就是点击左侧用户管理菜单，右侧主体区域显示用户的table列表，展示用户的基础信息，最右侧有编辑删除等操作按钮，左上角可以进行搜索，左下角可以进行翻页：

这个用户列表的页面布局，分为左上角的导航栏目，和显示功能的卡片视图，卡片视图分为上中下三个区域（搜索区、信息区和分页区）。

二、创建用户列表组件并注册路由

首先我们需要创建一个用户模块的组件，在components下创建user文件夹（用户类的组件都可以放在该文件夹下），新建Users.vue文件，用来编写用户列表功能：

编写一些基础结构代码：

<template>
    <div>
        <h3>用户列表组件</h3>
    </div>
</template>

<script>
export default 
</script>

<style scoped>
</style>

然后需要将该组件加入路由，打开路由配置文件router/index.js，先import引入Users组件，然后将user作为home的子路由配置进去，这样user的内容就能显示到右侧的主体区域了：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 
import Welcome from '../components/Welcome.vue' 
import Users from '../components/user/Users.vue' 

Vue.use(VueRouter)
const routes = []
const router = new VueRouter(
  routes: [
     path: '/', redirect: '/login' ,
     path: '/login', component: Login , //定义访问页面的路由地址
     
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        path:'/welcome',component:Welcome,
        path:'/users',component:Users
      ]
    
  ]
)
//下面代码省略...

刷新页面，我们点击用户管理下的用户列表菜单，就可以看到我们编写的Users页面了：

我们还需要在点击菜单后，给已点击的菜单添加高亮显示的效果，使用el-menu标签的default-active属性，指定该属性值为需要高亮的菜单的index值即可。

实现这个动态高亮的方法也不难，我们为二级菜单设置一个点击事件，每次被点击后，就记录该菜单的index值到一个公共属性上，然后主菜单的default-active属性就指定为该公共属性，具体写法如下：

首先为二级菜单绑定一个点击事件：

<!-- 二级菜单 -->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" 
  :key="subItem.id" @click="saveNavState('/'+subItem.path)">

然后编写该事件，将菜单的index值存储到sessionStorage中：

//保存菜单的index值（保持菜单的激活状态）
saveNavState(activePath)
  window.sessionStorage.setItem('activePath',activePath);
  this.activePath = activePath;

然后在数据区定义一个名为“activePath”的公共属性。为了让页面进来后就有高亮，我们在组件被创建的方法中，动态获取的sessionStorage中存储的activePath：

//上代码省略...
data()
  return 
    //左侧菜单数据
    menuList:[],
    iconsObj: 
      '125':'el-icon-user-solid',//用户管理
      '103':'el-icon-s-check',//权限管理
      '101':'el-icon-s-goods',//商品管理
      '102':'el-icon-s-order',//订单管理
      '145':'el-icon-s-data',//数据管理
    ,
    isCollapse: false,
    activePath: '' //被激活的菜单
  
,
created()
  this.getMenuList();
  this.activePath = window.sessionStorage.getItem('activePath');
,
//下代码省略...

然后为主菜单的default-active属性设置这个动态值：

<el-menu background-color="#333744" text-color="#fff" 
          active-text-color="#409BFF" :unique-opened="true" 
          :collapse="isCollapse" :collapse-transition="false"
          :router="true" :default-active="activePath">

效果：

三、绘制用户列表的基本UI结构

1、面包屑导航
我们先来绘制头部的导航帘：

在官网上有现成的组件，为“Breadcrumb 面包屑”导航：

我们将代码拷贝到Users组件中，进行修改：

<template>
    <div>
        <!-- 面包屑导航 -->
        <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>
    </div>
</template>

<script>
export default 
</script>

<style scoped>
</style>

别忘记在plugins/element.js中导入这些组件（Breadcrumb和BreadcrumbItem）：

import Vue from 'vue'
import  Button, Form, FormItem, Input, Message, Container, 
    Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup,
    Breadcrumb,BreadcrumbItem  from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.prototype.$message = Message

刷新页面，此时面包屑导航就搞定了：

2、绘制卡片视图区域
卡片视图也有对应的组件，为“Card”：

复制相关代码，粘贴到Users组件，进行修改：

<template>
    <div>
        <!-- 面包屑导航 -->
        <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>
            123
        </el-card>
    </div>
</template>

注：记得在plugins/element.js中导入“Card”组件。
效果：

卡片有点向上，我们给面包屑导航修改一下全局样式，让它有一些底边距（在assets/css/global.css中），并调整一下卡片视图的阴影，不让阴影那么深：

/* 全局样式表 */
html,
body,
#app
    height: 100%;
    margin: 0;
    padding: 0;


.el-breadcrumb
    margin-bottom: 15px;
    font-size: 12px;


.el-card
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;

效果：

3、绘制搜索区域和添加按钮区域
在el-card中编写一个带搜索的输入框，代码可以从官网拷贝：

修改后的代码：

<!-- 卡片视图 -->
<el-card>
    <!-- 搜索与添加区域 -->
    <el-input placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
</el-card>

效果：

这里整个搜索框占满了所有宽度，我们需要使用layout布局来调整，将行分割成一个个的分栏：

修改后的代码（把新增按钮也加进去了）：

<!-- 卡片视图 -->
<el-card>
    <el-row :gutter="20"><!-- gutter是指定每个分栏的间隔 -->
        <!-- 分栏一共占24格，给搜索框7格，添加按钮4格 -->
        <el-col :span="7">
            <!-- 搜索与添加区域 -->
            <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>

注：记得在plugins/element.js中导入Row和Col。
可以看到搜索框缩小在自己指定的宽度下了，新增按钮也有自己的宽度：

至此，用户列表的基本UI布局编写完毕，下一篇我们继续来编写和渲染用户列表数据。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/121580602