7-5 用户管理页页面功能实现

目录：

• 表格加载状态
• 分页功能

一、表格加载状态

表格加载状态，在element-ui有对应的组件：Loading 加载

说明就是在  <el-table v-loading="loading">，编辑 Table.vue

<template>
    <div class="common-table">   <!--v-loading="config.loading" 表格加载状态-->
      <el-table :data="tableData" height="100%" stripe v-loading="config.loading">
        ....
      </el-table>
      ...
</el-pagination>
    </div>
</template>

实现效果:

二、分页功能

这个分页功能在我们element-ui的 属性(current-page) 和 事件(current-change) :

Attributes:

current-page: 当前页数，支持 .sync 修饰符 number — 1

Events：

current-change currentPage 改变时会触发 当前页

思路：

• 在Table.vue组件中el-pagination 定义一个 @current-change="changePage" => changePage(page) {this.$emit('changePage',page);} page值通过 $emit传递给 父组件，就是UserMange.vue
• UserMange.vue 接收事件 => <Table ....  @changePage="getList"></Table>  接收事件，这个时间直接绑定在getlist即可。

2.1、编辑Table.vue组件(子组件)

<template>
    <div class="common-table">
      <el-table>
         ....
         <el-table-column label="操作" style="width: 100px">
             .....
         </el-table-column>
      </el-table>
      <!--:current-page.sync="config.page"同步父组件页数 @current-change="changePage"触发事件改变页数，数据传递给父组件-->
      <el-pagination class="pager" background layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage">
      </el-pagination>
    </div>
</template>

<script>
    export default {
         ....,
         methods: {
          ....,
          changePage(page) {
            this.$emit('changePage',page);
          }
        }
    }
</script>

2.2、编辑UserMange.Vue组件(父组件)

<template>
    <div class="manage">
      ....  <!--@changePage="getList"接收子组件传递过来的page数-->
      <Table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList"></Table>
    </div>
</template>

<script>
    ....

    export default {
      ....,
      data(){
        return {
          tableData: [],
          tableLabel: [
            ....,
            {
              prop: 'birth',
              label: '出生日期',
              width: 200
            },
            {
              prop: 'addr',
              label: '地址',
              width: 300
            },
          ],
          ....
      },
      methods: {
        getList() {
          this.config.loading = true;
          this.$http.get('/api/user/getUser',{
            params: {
              page: this.config.page
            }
          }).then(res => {
            this.tableData = res.data.list.map(item => {
              item.sexLabel = item.sex === 0 ? '女' : '男';
              return item
            });
            this.config.total = res.data.count;
            this.config.loading = false;
          })
        }
      },
      created() {
        this.getList()
      }
    }
</script>

<style scoped>

</style>