Vue中使用ElementUI的pagination组件 实现分页

分页请求原理：

很多情况，前端请求回来的数据是一个数组，这个数组数据量可以达到上万条，这样数据量过大，会导致前端卡顿，影响用户体验。

所以就需要分页，后端从数据库查数据时通过 如下语句

select * from article  limit startNumber,pageSize

后端需要计算从哪个索引开始，公式为

startNumber = (页码-1)*pageSize

前端分页还是后端分页？

答：当然是后端做分页

没有后端很难模拟分页请求，思路其实很简单，每次查询的数据直接for循环渲染就可以了。

注意需要后端的数据包含如下

1. total：数据总条数，用来给前端分页器赋值
2. data: 数组是表格需要的数据

前端需要确定的数据

1. pageSize：页码大小，就是一次性请求多少数据，它用来规定 分页器 显示条数
2. currentPage: 当前为第几页，发请求时用来确定请求的是第几页

代码如下

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="id" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.age }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
      @prev-click="handlePageChange"
      @next-click="handlePageChange"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表格请求的数据
      tableData: [
        {
          id: 1,
          name: "滕滕",
          age: 24,
        },
        {
          id: 2,
          name: "滕滕",
          age: 24,
        },
        {
          id: 3,
          name: "滕滕",
          age: 24,
        },
        {
          id: 4,
          name: "滕滕",
          age: 24,
        },
      ],
      pageSize: 3, //一次渲染数据量
      total: 7, //数据总条数
    };
  },
  methods: {
    //请求数据
    getDataList() {

    },
    //处理：点击页码、上一页、下一页按钮事件
    handlePageChange(pageNumber) {
      this.currentPage = pageNumber;
      this.$nextTick(() => {
        //调用请求数据
        this.getDataList();
      });
    },
  },
};
</script>