Vue项目中做表格用elment-ui中分页组件的思路整理

 由图可知，想实现以上的分页功能代码如下

<template>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination 
              layout="total, sizes, prev, pager, next, jumper" 
              :total="total" 
              :page-size="size" 
              :page-sizes="[2,5,10]" 
              @current-change="hCurrentChange" 
              @size-change="hSizeChange" />
       </el-row>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      pageNumber: 1,
      queryParams: {
        page: 1,
        size: 2
      },
      page: 1, // 当前页码
      size: 2, // 每页几条
      total: 0 // 总共数据条数
    }
  },
  created() {
    // 获取数据渲染页面
    this.loadEmployees()
  },
  methods: {
    // 获取数据的api
    async loadEmployees() {
      const res = await getEmployeeList(this.queryParams)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 分页组件会自动接收当前点击的页码
    hCurrentChange(curPage) {
      // 1. 更新页码
      this.queryParams.page = curPage
      // 2. 重发请求数据渲染页面
      this.loadEmployees()
    },
    // 分页组件会自动接收更改了每页几条
    hSizeChange(curSize) {
      // 1. 更新每页的条数
      this.queryParams.size = curSize
      // 2. 重发请求数据渲染页面
      this.loadEmployees()
    }
</script>

首先在分页组件中设置layout，出现了分页的结构

:total="total" 请求数据后在data中设置total数据实时渲染到分页上

:page-size="size" 更换页数后改变分页的页码

:page-sizes="[2,5,10]" 它的值是数组，可以通过设置数组中的值来控制一页显示多少数组

 @current-change="hCurrentChange" 分页组件自带的方法，当改变页码时该方法自动传递改变的页码值，这样我们就可以改变data中 queryParams对象中的值，重新发起获取数据的方法，对应页码的变化获取对应的数据

 @size-change="hSizeChange" />分页组件自带的方法，当改变一页渲染的数据条数改变时该方法自动传递改变的数据条数，这样我们就可以改变data中 queryParams对象中的值，重新发起获取数据的方法，对应数据条数的变化获取对应的数据