前端实现el-pagination分页的两种业务场景,你知道吗？

在这里插入图片描述

💌 作者简介

📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
📜 CSDN主页：水香木鱼
📑 个人博客：陈春波
🎨 系列专栏：后台管理系统
🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

场景1【后端以单页的形式返回】`适用于处理数据量大的表格`

思路：前端去请求一次分页，后端返回对应的分页

演示效果：

在这里插入图片描述

①表格数据

 <el-table :data="tableData" width="100%" lazy border>
        <el-table-column
          prop="dailyDate"
          label="日期"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="workType"
          label="工作类型"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="standardContent"
          label="事件类型"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jobContent"
          label="事件分项"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="内容"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="createDateTime"
          label="时间"
          align="center"
          width="140"
        >
        </el-table-column>
        <el-table-column prop="location" label="地址" align="center">
        </el-table-column>
        <el-table-column prop="unit" label="单位" align="center">
        </el-table-column>
        <el-table-column prop="trainNumber" label="车次" align="center">
        </el-table-column>
      </el-table>
       <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="currentTotal"
      />

②定义分页属性

data() {
    return {
        currentPage: 1,
        pageSize: 10,
        currentTotal: 0,
        tableData: [], //当前页码的表格数据
	 }
}

③分页逻辑处理

methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
      //点击下一页的时候 重新调用接口从后端取分页数据;{ current: this.currentPage } 为传给后端的字段
      logList({ current: this.currentPage }).then(res => {
        this.tableData = res.result
      })
    },
    //获取表格数据
    getList() {
      //封装的请求接口 方式
      logList().then(res => {
        this.tableData = res.result
        this.currentTotal = res.page.total//获取后端返回的分页（总条数）
      })
     },
 }

④初始化时调用

 created() {
     this.getList() //初始化调用数据
 }

场景2【纯前端实现分页】`适用于处理数据量小的表格`

实现思路：前端拿到表格的所有数据，然后对数据进行处理，紧接着操作分页。

缺点：不适合数据量大的表格

①表格数据

<template>
  <div class="home">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="phone" label="电话" width="180"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

②定义分页属性

 data() {
    return {
      currentPage: 1, //当前页
      total: 0, //总条数
      list: [], //后台返回的所有结果
      tableData: [], //当前页码的表格数据
      pageSize: 20, //当前页容量
    };
  },

③分页逻辑处理

 methods: {
    //切换每页条数容量
    handleSizeChange(val) {       
      this.currentPage = 1;
      this.pageSize = val;
      this.getList();
    },
    //切换当前页
    handleCurrentChange(val) {    
      this.currentPage = val;
      this.getList();
    },
    //获取表格数据
    getList() {   
      API.getList().then((res) => {
        this.list = res.data.data;    //总数组
        this.total = res.data.data.length;      //总条数
        this.tableData = this.getNeedArr(this.list,this.pageSize)[this.currentPage - 1]  //当前页的表格数据
        //console.log(this.tableData);
      });
    },
    //纯前端处理分页，进行长度分割
    getNeedArr(array, size) {       //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
      const length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      //核心部分
      let index = 0; //用来表示切割元素的范围start
      let resIndex = 0; //用来递增表示输出数组的下标

      //根据length和size算出输出数组的长度，并且创建它。
      let result = new Array(Math.ceil(length / size));
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size));
      }
      //输出到新数组
      return result;
    },
  },