标题：电商后台管理系统——用户列表

标题：电商后台管理系统——用户列表

绘制用户列表基本结构
A.使用element-ui面包屑组件完成顶部导航路径
B.使用element-ui卡片组件完成主体表格
搜索和添加用户结构：
-使用element-ui输入框完成搜索框及搜索按钮：
组件Card)，再使用element-ui输入框完成搜索框及搜索按钮，
-使用栅格布局来划分结构
组件Row，Col)，然后再使用el-button制作添加用户按钮
Layout 布局->分栏间隔： :span=“24” 一行总值为24
input输入框->复合型输入框.搜索

<div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
        <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>
      <!-- 1.搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 2.用户列表区域 el-table-->
      <!-- 3.分页区域 el-pagination-->
      </el-card>
      <!-- 4.添加用户的对话框 el-dialog-->
      <!-- 5.修改用户的对话框 -->
      <!-- 6.分配角色的对话框 -->
</div>

一、搜索与添加区域

1.请求用户列表数据
获取查询用户信息的参数；el-input双向绑定查询用户信息
el-input的清空点击事件和按钮的点击事件均调用获取用户列表请求函数

<script>
export default {
   
  data() {
   
    return {
   
      //获取查询用户信息的参数
      queryInfo: {
   
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      //保存请求回来的用户列表数据
      userList:[],
      total:0
    }
  },
  created() {
   
    this.getUserList()
  },
  methods: {
   
    async getUserList() {
   
      //发送请求获取用户列表数据
      const {
    res: data } = await this.$http.get('users', {
   
        params: this.queryInfo
      })
      //如果返回状态为异常状态则报错并返回
      if (res.meta.status !== 200)
        return this.$message.error('获取用户列表失败')
      //如果返回状态正常，将请求的数据保存在data中
      this.userList = res.data.users;
      this.total = res.data.total;
    }
  }
}
</script>

二、将用户列表数据展示

样式美化：边框线border属性；隔行变色stripe；添加索引列，在最前面添加一列 type属性设置为index即可；
2.1组件Table,TableColumn：使用表格来展示用户列表数据，使用element-ui表格组件完成列表展示数据
2.2组件Switch：会使用作用域插槽获取每一行的数据
再使用switch开关组件展示状态信息
2.3使用作用域插槽来进行渲染的，
在操作列中包含了修改，删除，分配角色按钮
2.4组件Tooltip：当我们把鼠标放到分配角色按钮上时
希望能有一些文字提示

<!-- 用户列表(表格)区域 -->
<el-table :data="userList" border stripe>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="姓名" prop="username"></el-table-column>
    <el-table-column label="邮箱" prop="email"></el-table-column>
    <el-table-column label="电话" prop="mobile"></el-table-column>
    <el-table-column label="角色" prop="role_name"></el-table-column>
    <el-table-column label="状态">
        <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"></el-switch>
        </template>
    </el-table-column>
    <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
            <!-- 修改 -->
            <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<