概述：

当我们从后端返回的数据量很大，并且根据需求我们需要将返回的数据全部都显示在页面中，默认情况下会把所有的数据全部显示在一个页面，这样非常影响视觉和页面的使用，这个时候我们就会需要使用分页来帮助我们进行初始化优化。

效果图：

代码部分

Html

<template>
  <div class="pageation">
    <h3>分页</h3>
    <el-table
      style="width: 100%"
      :data="
        userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column label="日期" prop="nickName" width="180"> </el-table-column>
      <el-table-column label="用户姓名" prop="email" width="180">
      </el-table-column>
      <el-table-column label="邮箱" prop="phone" width="180"> </el-table-column>
      <el-table-column label="地址" prop="userName" width="200">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length">
    </el-pagination>
  </div>
</template>

 Script:

<script>
import axios from "axios";
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      userList: [],
    };
  },
  created() {
    this.handleUserList();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange (size) {
        console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
        console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleUserList() {
      axios.get('/user/list').then(res=>{
        console.log(res,'res');
        this.userList = res.data.data.list[0].records;
      }).catch(error=>{
        console.log(error);
      })
    },
  },
};
</script>