05 用户管理

用户列表开发

点击用户列表， 在主体区域展示数据

面包屑 + 卡片视图

1 点击用户列表，在主体区显示用户组件

1.1 创建用户组件

1.2 添加路由跳转

注意路径是自动生成的， 不能随意定义了

测试：

2 解决一个小问题

二级菜单并没有被高亮显示

需求： 点击二级菜单，高亮显示。同时刷新列表之后，也还是高亮显示

死数据的高亮实现

当点击 的时候。 把路径放在sessionstorage当中，

当你刷新的时候，即 home组件刚被创建的时候，就立即取出来，赋值到左侧菜单就可以了

 :default-active="activePath"
 @click="saveActivePath('/' + sunItem.path)"

 this.activePath = window.sessionStorage.getItem('activePath')

saveActivePath(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
      // console.log(this.$route.path)
    }

测试：此时可以高亮显示了

3 绘制用户列表的基本机构

3.1 面包屑

       <!-- 面包屑 -->
        <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>

3.2卡片

1 添加卡片

2 给面包屑添加 边距

3 给卡片重置阴影部分

3.3 添加 复合型输入框

input当中包含一个el-button

   <el-input placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>

设置一个固定宽度。 怎么设置固定宽度那？

使用elementui里边的栅格

【横向】布局用栅格

2 栅格进行布局

给每个格添加边距 用：gutter

或者：

4 获取用户列表数据

推荐 把调用参数先定义到data里边

返回结果，需要渲染的数据，也定义到data里边

当前页 是1

5 渲染用户列表数据

：data 是data里边的数据。 数组中的对象要渲染成一行

对象中的每一个属性，代表一列

5.1 添加格式：

5.2 给每一个添加边框线

5.3 隔行变色

5.4 添加间距

问题：

我写的table 并没有边距

因为，table不在card里边！！！！！

5.5 用户列表添加索引列

5.6 给单元格设置宽度

<el-table-column
        prop="date"
        label="日期"
        width="180">

给table设置大小

    <el-table
      :data="tableData"
      style="width: 100%">

6改造状态列的显示效果

通过作用域插槽去接收scope，就可以通过scope 来row这个属性

scope.row 就代表这一行的数据

数据拿到了，就可以拿到这个状态属性值

2

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

v-model来控制关闭和打开

    <el-table-column label="状态">
                    <template v-slot="{ row }">

                        <el-switch v-model="row.mg_state" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
    </el-table-column>

如果后台返回的0,1 用 active-value="1" 展开的值 inactive-value="0 ，不展开的值

也可以指定颜色：active-color="#13ce66" inactive-color="#ff4949"

6.1 实现用户状态的修改

我们修改状态， 然后进行刷新， 发现状态又变回去了

为什么状态没有保存下来那？我们只是在前台 ，并没有同步到数据库。所以你在刷新页面，又变回去了

解决：

监听到Switch 开关状态的改变，从而拿到最新的状态

调用api接口，保存 到数据库中

监听事件

只要你修改， v-model就会拿到最新的数据

7插槽形式自定义列的渲染

操作这一列，必须要拿到id才能操作 ，所以只能根据作用域插槽来操作

 <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>

7.2 文字提示

第三个按钮看不出是什么功能，所以添加一个提示按钮

3 怎么自动隐藏？

  <el-table-column label="操作">
                    <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 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>

8实现数据分页效果

8.1 @size-change="handleSizeChange"

监听 pagesize改变的事件

8.2 @current-change="handleCurrentChange"

只要页面值发生了变化，就会立即触发 @current-change 事件处理函数

8.3:page-sizes="[100, 200, 300, 400]"

提供我们进行切换， 提供了几项，下拉菜单就能看到几项

第一个数据要和pageszie一样

8.4 layout="total, sizes, prev, pager, next, jumper"

用于展示那些功能组件

8.5 如果分页条数没出来，看total是否被赋值上

8.5 代码

     <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        @size-change="handleSizeChange"
        :page-size="queryInfo.pagesize"
        :page-sizes="[5, 9, 13, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userData.total"
      >

    // 监听 pagesize 改变事件 每页显示的个数
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },

    // 监听 页码值 改变的事件 当前页面值
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },

        :page-size="queryInfo.pagesize"
        :page-sizes="[5, 9, 13, 15]"

queryInfo,pagesize： 5 要和 :page-sizes="[5, 9, 13, 15]" 保持一致

分页的bug:

8.6添加边距

设置位置：

.el-pagination{
    margin-top: 25px;
    display: flex;
    justify-content: end;
}

或者使用el-row 来设置位置

9实现搜索的功能

9.1 搜索功能

首先 文本框 和data的数据进行双向绑定

绑定完毕，点击搜索按钮，去调用接口

1双向绑定

2 调用接口

9.2 删除input ,获取所有数据

需求： 点击清空按钮， 文本框就被重置了，所有用户就会立即被查询出来

当你点击清空按钮，就会立即触发清空事件