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

Posted 2023-01-21 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端实现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;
    ,
  ,