前端分页处理

淩亂°似流年 2024-03-31 17:16 109阅读 0赞

页面中实现的分页效果，要么后端提供接口，每次点击下一页就调用接口，若不提供接口，分页得前端自己去截取。

![3e1ca6558f0847d9a0da9685df40cc8b.png][]

**方法一：slice方法**  
slice(参数1，参数2)方法是返回一个新的数组对象，左开右闭  
参数1：起始下标数  
参数2：结束下标数(不计算在内)  
如data:\[1,2,3,4,5,6,7,8\]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即\[1,2,3\]，可以看成数学中的\[0,3)

slice方法详细讲解

这个原理就和分页原理很相似，分页也是把一个很长的数组，按照每页多少条（size）分为若干个短数组

> //allData为全部数据，tableData是目前表格绑定的数据  
> (this.page - 1) \* this.size,  
> this.page \* this.size  
> );  
> this.total=this.allData.length

下面是详细代码：

![6d69fd0394e342918f75c16d8f46d07f.png][]

![1c99fb8fe4504dcb910f32f63e6f08b0.png][]  
比如：data=\[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19\]  
总条目数total=20，  
若设size=3（每页3条）

![a3d66ed09ca44635b6dbc15d3b2edcb8.png][]

方法二：splice方法  
splice方法可以理解为删除，与方法一的slice只差一个p字母  
用splice分页，需要用到的有2个参数，  
splice(参数1，参数2)  
参数1：从第几位开始  
参数2：删除几个元素  
如data:\[1,2,3,4,5,6,7,8\]，那么data.splice(0,3)就是从第0位开始，删除3个元素，即删除的元素为\[1,2,3\]，剩余元素为data:\[4,5,6,7,8\]，此方法会改变原数组

splice方法详细讲解

这个原理要和分页原理结合关联起来，如果一页3条数据，第一页就是从0位开始，删除的3个元素，即splice(0,3)，第二页就是从第3位开始，删除的3个元素，即splice（3,3）  
因此用splice分页的关键语句就是：

> let data=JSON.parse(JSON.stringify(this.allData))  
> this.tableData = data.splice(  
> (this.page - 1) \* this.size,  
> this.size  
> );  
> this.total=this.allData.length

注意:splice会改变原数组，因为它使用一次，相当于原数组就被删除了一些元素，必须使用深拷贝先拷贝一份allData，然后再取被删除的元素赋值给tableData 。

其余代码不变，只是略微改变处理完整数据的方法

![cf5b64123348489e8074c0ee46cb41fa.png][]

比如：  
data=\[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19\]  
由于深拷贝的原因，data可以等于完整的allData，  
总条目数total=20，  
若设size=3（每页3条）

![666f75bdb5284618908b6d684862b2e7.png][]

两种方法的总结  
![ba2f5cd67abf4eb5b1519e95f7503a8b.png][]

最后完整代码如下：

<template>
      <div>
        <el-table :data="tableData" border>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
    
        <el-pagination @size-change="sizeChange" @current-change="currentChange"
          :current-page="page" :page-size="size" :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          page: 1, //第几页
          size: 3, //一页多少条
          total: 0, //总条目数
          pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
          tableData: [], //表格绑定的数据
          allData: [
            {
              date: "2016-05-02",
              name: "王小虎1",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎2",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎3",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎4",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎5",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎6",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎7",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎8",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎9",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎10",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎11",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎12",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎13",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎14",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎15",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎16",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎17",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎18",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎19",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎20",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎21",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎22",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎23",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎24",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎25",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎26",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎27",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎28",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎29",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎30",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎31",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎32",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎33",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎34",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎35",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎36",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎37",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎38",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎39",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎40",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎41",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎42",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎43",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎44",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎45",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎46",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎47",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎48",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
              date: "2016-05-02",
              name: "王小虎49",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎50",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎51",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎52",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        };
      },
      methods: {
          //获取表格数据，自行分页(slice)
        getTabelData() {
            //allData为全部数据
          this.tableData = this.allData.slice(
            (this.page - 1) * this.size,
            this.page * this.size
          );
          this.total=this.allData.length
        },
    
    
        //获取表格数据，自行分页（splice）
        getTabelData2() {
          let data=JSON.parse(JSON.stringify(this.allData))
          this.tableData = data.splice(
            (this.page - 1) * this.size,
            this.size
          );
          this.total=this.allData.length
        },
        //page改变时的回调函数，参数为当前页码
         currentChange(val) {
          console.log("翻页，当前为第几页", val);
          this.page = val;
          this.getTabelData2();
        },
        //size改变时回调的函数，参数为当前的size
        sizeChange(val) {
          console.log("改变每页多少条，当前一页多少条数据", val);
          this.size = val;
          this.page = 1; 
          this.getTabelData2();
        },
      },
      created() {
        this.getTabelData2();
      },
    };
    </script>

[3e1ca6558f0847d9a0da9685df40cc8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/46daa3bf485f4610b63d69b8a6568da7.png
[6d69fd0394e342918f75c16d8f46d07f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/930b08c57adb41799540d19342ca6555.png
[1c99fb8fe4504dcb910f32f63e6f08b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e36f97203f31463ca315ade1dd82a8f6.png
[a3d66ed09ca44635b6dbc15d3b2edcb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4c092eae85b44fe8b3b83bc78641ab21.png
[cf5b64123348489e8074c0ee46cb41fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a5da62eb2afd420e9f6aed0120bad381.png
[666f75bdb5284618908b6d684862b2e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0eb40e0682e949039a7f3876ab1225f4.png
[ba2f5cd67abf4eb5b1519e95f7503a8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c702dd92da8d41dfb7f5d39afb26f634.png