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

Posted 水香木鱼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端实现el-pagination分页的两种业务场景,你知道吗?相关的知识,希望对你有一定的参考价值。


💌 作者简介

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

场景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;
    ,
  ,

④初始化调用

  created() 
    this.getList();
  ,

import * as API from "@/api/pageRequest/home.js"; 请求的后端接口 【在这里就不做详细说明了,目前大多数公司都是二次封装axios,会搬就行啦!】


📖 博主致谢

感谢大家阅读到结尾,本次的文章就分享到这里,总结了【前端实现分页的两种业务场景】,希望可以帮到大家,谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇


🛩往期精彩:

一键图解iframe标签属性以及使用

iframe标签嵌套页面时,如何让页面内的高度自适应

Adobe Photoshop CS6 仅需要两个步骤快速去除图片中的文字

Adobe Photoshop CS6 缩小图片保持不失真的最佳方案

最详细的教程,教你如何彻底关闭Chrome浏览器自动更新

以上是关于前端实现el-pagination分页的两种业务场景,你知道吗?的主要内容,如果未能解决你的问题,请参考以下文章

django分页的两种方式

EasyUI Pagination 分页的两种做法

sql 分页的两种写法

vue+ElementUI——表格分页(前端实现方法)

Element-ui组件--pagination分页的使用

STU的分页操作