2022-07-08 vue项目-通用后台管理系统(六) 使用elementui实现Users.vue页面下的动态绑定的分页效果

1.element-ui的导航样式组件——面包屑(breadcrumb)

1.1.介绍

官网位置:https://element.eleme.cn/#/zh-CN/component/breadcrumb
它的作用是显示当前页面的路径,宽衣让你快速返回之前的任意页面,大概长这样:

不管你点击了几级子路由,都可以在面包屑上找到快速返回上几级路由的导航

1.2.使用

• 复制官网上的面包屑示例代码到Users.vue 中看看效果:

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

• 使用separator-class和icon图标设置自定义的图标分隔符
  (比如改成右书名号的箭头形式,即el-icon-d-arrow-right)

<template>
  <div class="users">
    <el-breadcrumb separator-class="el-icon-d-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

1.3.微调

考虑到侧边栏只有二级菜单,可以把面包屑中的一层el-breadcrumb-item删掉,
再把其中的文字改成侧边栏菜单的文字,先写死,后面再动态绑定

<el-breadcrumb separator-class="el-icon-d-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>

有了这个{path:"/"},目前可以实现简单的跳转回home页的功能

2.element-ui的Other样式组件——卡片(Card)

2.1.介绍

官网位置:https://element.eleme.cn/#/zh-CN/component/card#ji-chu-yong-fa
如果说面包屑是用于导航,
那么卡片就是用于展示内容

2.2.回顾:element-ui的基础样式组件——布局(layout)

官网位置:https://element.eleme.cn/#/zh-CN/component/layout#layout-bu-ju
通过基础的 24 分栏，迅速简便地创建布局。

2.3.使用:在el-caid标签中使用栅格系统写搜索框

代码

就是在el-card标签里面使用了layout布局的标签

<!-- 卡片 -->
<el-card class="box-card">
  <!-- row属性:gutter表示栅格间隔 -->
  <el-row :gutter="20">
    <!-- col属性:span表示栅格占据的列数 -->
    <el-col :span="8">
      <el-input placeholder="请输入内容">
        <!-- 注意这个el-button标签是写在el-input标签内部的子标签 -->
        <!-- 如此它才能绑定input的slot的相关属性值 -->
        <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>

难点:使用input slot给文本框内容添加图标

上面实际上就是input的slot一个应用场景:
就是el-input标签它是一个闭合标签,要把el-button写在el-input标签里面作为它的子标签,
然后在el-button 上绑定input slot属性,就可以在input文本框前后添加相关图标了
官网位置:https://element.eleme.cn/#/zh-CN/component/input#input-slots

效果

3.用户列表获取:配置vue.config.js,并从前台获取数据分页好的用户列表

3.1.先给上述代码微调css

/**面包屑**/
.el-breadcrumb {
   
    font-size: 12px;
}
/**卡片**/
.el-card {
   
    margin-top: 15px