P17-Vue3后台管理系统-用户管理界面-分页功能开发

P17-Vue3后台管理系统-用户管理界面-分页功能开发

1.概述

这篇文章介绍用户管理界面的分页功能实现。

2.实现分页功能

2.1.查看Element官网提供分页插件

2.2.绑定当前页事件

2.3.父组件监听子组件的事件

UserManage父组件监听CommonTable子组件发送的事件，并处理事件返回对应结果给子组件。

• UserManage父组件监听子组件事件
  
• 打印子组件事件发送的页数
  
• 绑定getList方法请求当前页的数据
  
• 分页效果
  

3.优化table表格列宽

CommonTable子组件根据UserManage父组件是否传递width来动态调整某个列的列宽，如果没有传递则使用默认值。

4.分页完整代码

4.1.UserManage组件代码

<template>
  <div class="manage">
    <div class="manage-header">
      <el-button type="primary">+ 新建</el-button>
      <common-form inline :formLabel="formLabel" :form="searchForm">
        <el-button type="primary">搜索</el-button>
      </common-form>
    </div>
    <!-- 
      Table表格组件
        - :tableData="tableData"：给子组件CommonTable传递表格数据
        - :tableLabel="tableLabel"：给子组件CommonTable传递表格列名结构
        - @changePage：接收CommonTable子组件发送的changePage事件，获取当前用户点击的页数
     -->
    <common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList"></common-table>
  </div>
</template>

<script>
// 导入子组件
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
export default {
  components: {
    // 注册子组件
    CommonForm,
    CommonTable
  },
  data() {
    return {
      // table表格数据
      tableData: [],
      // 表格列名
      tableLabel: [
        {
          // prop属性来对应对象中的键名即可填入数据
          prop: 'name',
          // 表格列名称
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'sexLabel',
          label: '性别'
        },
        {
          prop: 'birth',
          label: '出生日期',
          width: 200
        },
        {
          prop: 'addr',
          label: '地址',
          width: 520
        }
      ],
      // 表格配置信息
      config: {
        page: 1,
        total: 30,
        loading: false
      },
      // form表单数据
      searchForm: {
        keyword: ''
      },
      formLabel: [
        {
          model: 'keyword',
          label: ''
        }
      ]
    }
  },
  methods: {
    // 请求table表格数据
    getList() {
      this.config.loading = true
      this.$http
        .get('/api/user/getUser', {
          params: {
            page: this.config.page
          }
        })
        .then(res => {
          // 请求接口返回的数据赋值给tableData
          this.tableData = res.data.list.map(item => {
            item.sexLabel = item.sex === 0 ? '女' : '男'
            return item
          })
          this.config.total = res.data.count
          this.config.loading = false
        })
    }
    // 打印子组件传递当前的页数
    /* 
    changePage(val) {
      console.log(val)
    }
     */
  },
  // 调用请求表格数据方法
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/userManage';
</style>

4.2.CommonTable组件代码

<template>
  <div class="common-table">
    <!-- 
      将表格数据tableData赋值给data 
        -stripe：斑马纹显示表格
        -v-loading：显示loading加载过程,值有父组件data数据config对象传递，决定是否显示加载效果
    -->
    <el-table :data="tableData" height="90%" stripe v-loading="config.loading">
      <!-- 表格第一列序号 -->
      <el-table-column label="序号" width="85">
        <template slot-scope="scope">
          <!-- 
            设置序号
              -  (config.page - 1) * 20 ：获取当前页数，每页20条
              - scope.$index + 1：设置序号
          -->
          <span style="margin-left: 10px">{{ (config.page - 1) * 20 + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 
        表格序号后面的列通过遍历父组件传入的data数据动态改变
          - show-overflow-tooltip:超出一行的内容点点点显示
          - :width:动态设置列宽，如果父组件传递了某个列的宽度则使用父组件传递的宽度，如果某个列没有传递宽度，则使用默认宽度
          
       -->
      <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" show-overflow-tooltip :width="item.width ? item.width : 125">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <!-- Table表格操作列 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 
      设置分页
        - :total="config.total":设置总页数
        - :current-page.sync="config.page"：设置当前页数
        - @current-change：绑定当前页事件，获取用户选择的页数
    -->
    <el-pagination class="pager" layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage">
    </el-pagination>
  </div>
</template>

<script>
export default {
  // 接收父组件传来的数据
  props: {
    tableData: Array,
    tableLabel: Array,
    config: Object
  },
  methods: {
    // 表格操作列方法
    handleEdit() {},
    handleDelete() {},
    // ---分页操作方法：当改变当前页数时，向父组件发送当前页数
    changePage(page) {
      this.$emit('changePage', page)
    }
  }
}
</script>

<style lang="scss" scoped>
.common-table {
  // 设置表格高度，减去页面header高度
  height: calc(100% - 62px);
  // 设置表格背景色
  background-color: #fff;
  // 设置相对定位
  position: relative;
  // 设置分页样式
  .pager {
    position: absolute;
    bottom: 0;
    right: 20px;
  }
}
</style>