前端（Vue）实现自行分页的两种方法

最新推荐文章于 2024-05-27 15:48:01 发布
最新推荐文章于 2024-05-27 15:48:01 发布
阅读量3.6w 收藏 327
点赞数 108
文章标签： js vue slice pagination
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine__girl/article/details/114546660
版权

前端做页面时，经常会遇到表格+分页的组合，有时因为一些原因，需要前端自己实现分页，下面介绍2种方法实现分页，
在这里插入图片描述

方法一：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.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total=this.allData.length

下面是详细代码：
在这里插入图片描述
在这里插入图片描述
如果还是不能理解，可以用举例法为大家演示
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条）

pagesizeslice( (page-1)×size , page×size )实际数据（表格）意义
13[0,3)[0,1,2]截取数组下标为0—3（不含3）的数据
23[3,6)[3,4,5]截取数组下标为3—6（不含6）的数据
33[6,9)[6,7,8]截取数组下标为6—9（不含9）的数据
43[9,12)[9,10,11]截取数组下标为9—12（不含12）的数据
53[12,15)[12,13,14]截取数组下标为12—15（不含15）的数据

方法二：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

其余代码不变，只是略微改变处理完整数据的方法
在这里插入图片描述
如果还是不能理解，依然用举例法为大家演示
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条）

pagesizesplice( (page-1)×size , size )实际数据（表格）意义
13（0,3）[0,1,2]从第0位开始，删除的3个元素
23（3,3）[3,4,5]从第3位开始，删除的3个元素
33（6,3）[6,7,8]从第6位开始，删除的3个元素
43（9,3）[9,10,11]从第9位开始，删除的3个元素
53（12,3）[12,13,14]从第12位开始，删除的3个元素

两种方法的总结

方法名slice (参数1，参数2)splice(参数1，参数2)
参数1(page-1)*size(page-1)*size
参数2page*sizesize
意义截取删除
深浅拷贝浅拷贝深拷贝

最后完整代码如下：

<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>
江湖儿女快意恩仇
关注
  • 108
    点赞
  • 踩
  • 327
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
vue+Element-ui实现分页效果实例代码详解
10-17
主要介绍了vue+Element-ui实现分页效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
利用vue + element实现表格分页和前端搜索的方法
01-19
前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架，已经帮我们封装好了一系列功能性的组件，比如栅格系统、表格、表单、树形菜单、通知等。对于搞后台管理界面的项目，特别是不需要考虑兼容ie8、ie9以下的项目、ElementUI是一个不错的选择。 而且ElementUI的文档写得十分详尽，参照demo可以很快上手。 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 实现思路 1.前端后台管理会存在很多表格,表格数据过多就需要分页; 2.前端交互每次搜索如果都请求服务器会加大服务器的压力
Vue前端实现分页功能
最新发布
ZHANGHUI3239619的专栏
05-27 421
dataList: [...], // 你的数据数组。pageSize: 10 // 每页显示的数量。// 计算当前页面的数据。
Vue2 实现前端分页
weixin_65084919的博客
05-09 632
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href=".
Vue前端分页功能
m0_70010847的博客
03-28 274
当后端没有做分页返回total时，需要我们前端自己处理做分页。
前端vue实现分页功能
热门推荐
weixin_42661959的博客
01-27 1万+
前端Vue实现分页功能 我们都知道在spring boot项目中安装pagehelper可以实现分页功能，但是在vue中也能在前端实现分页。 1、 首先，在data中定义以下变量： data() { return { list: null, listLoading: true, totalPage: 1, // 统共页数，默认为1 currentPage: 1, //当前页数 ，默认为1 pageSize: 5, // 每页显示数量 cu
vue前端分页功能怎么实现
花生日记
05-28 3216
这样，当用户点击分页组件的页码时，`paginate`方法会被调用，从而更新`paginatedData`，实现分页功能。// 从服务器或其他地方获取数据，并将其赋值给allData。paginatedData: [], // 分页后的数据。allData: [], // 原始数据。// 获取数据的方法。
vue项目前端做分页（后端一次性返回所有数据，前端自己分页）
qq_46103732的博客
04-26 2199
vue项目前端做分页（后端一次性返回所有数据，前端自己分页） ​ 在项目中有些场景会让前端自己来处理分页，实现的方法也很简单，我们只需要用到一个slice方法就可以了。下面是具体的实现步骤： 首先是实现一个分页组件，在这里就不具体讲述了，需要知道怎么实现分页组件的小伙伴先阅读下面这个教程 前端基于elementui封装分页组件 那根据上面的教程在相应的页面引入分页组件后，我们开始对请求回来的数据进行拆分分页 ​
vue前端分页
weixin_46645338的博客
10-31 213
vue前端分页，配合element-ui中的 el-table 和el-pagination 来实现功能
vue实现前端分页完整代码
10-15
主要为大家详细介绍了vue实现前端分页完整代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
100行代码实现一个vue分页组功能
12-12
今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再github上下载的到：下载地址 先来看一下实现效果： 点击查看效果 整体思路 我们先看一下使用到的文件的目录： 我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件。整体思路是通过 props 来达到组件的灵活通用的效果，整体语法是使用vue的VM语法。 pageComponent.vue实现 首先实现一个分页，需要知道数据总条数，一个页面显示的数据条数和当前显示第几页的数据。那么我们在 pageComponent
Vue+ElementUI table实现表格分页
12-13
分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，...
基于vue.js实现分页查询功能
10-17
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的分页查询功能，这在数据量较大的应用中非常常见。...总的来说，Vue.js提供了一种灵活的方式来构建这样的功能，使得开发者能够快速且高效地实现分页查询。
前端Javaweb分页实现
03-19
前端分页主要分为两种方式：纯前端分页和前后端联动分页。 1. 纯前端分页：所有数据一次性从后端获取，然后在前端进行分页处理。这种方式对后端压力较小，但当数据量过大时，会增加页面加载时间。 2. 前后端联动...
vue分页器组件跳转下一页上一页
07-20
总的来说，这个项目提供了一个实用的Vue分页器组件，结合了Vue的基础知识、Webpack构建流程以及Babel的语法转换，实现了用户友好的分页功能。通过阅读源代码和理解相关配置，开发者可以学习到Vue组件化开发的实践...
用vue封装分页器，让你的页面简单而不失优雅
Shids_的博客
01-21 5559
用vue封装分页器，让你的页面简单而不失优雅
Vue+ElementUI前端实现分页和模糊查询
m0_47352999的博客
07-06 3131
1.变量的定义： tableData：该变量用来向表格中展示数据。 tempDate：该变量用来保存在后台请求过来的所有数据，便于模糊查询时进行匹配。 2.computed和watch方法 watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来。当Vue视图中的数据变化时, 关联的函数会被执行。 watch可以监听data里面值的变化。当input输入框中的值发生变化的时候，与其关联的函数便会执行。 3.向后台请求数据的方法，写在methods里面 4.表格.
写一个VUE前端分页查询程序
09-21
### 回答1： 首先，需要准备好Vue和axios，然后创建一个Vue实例，在实例中定义一个data函数，用于存储分页查询的信息，包括当前页数、每页的数量和总数量等。在created函数中，调用axios来发送请求，获取分页数据。在mounted函数中，初始化分页器。在methods函数中，添加分页器的处理函数，实现点击分页器时触发axios来获取分页数据。 ### 回答2： Vue.js是一种用于构建用户界面的JavaScript框架。它具有简单易用、高效灵活的特点，因此非常适合用来开发前端分页查询程序。 首先，我们需要安装Vue.js和Vue Router插件。然后创建一个Vue实例，并在该实例中定义一个组件用于处理分页查询功能。 在组件中，我们可以使用Vue的响应式数据来存储查询结果和当前页码。我们还可以使用计算属性来根据总记录数和每页显示的数据量计算总页数。 接下来，我们需要在模板中定义一个表格来显示查询结果。可以使用v-for指令来遍历查询结果数组，并显示每条记录的相关信息。 为了实现分页功能，我们可以添加两个按钮或链接，一个用于切换到上一页，另一个用于切换到下一页。当点击按钮时，我们可以调用方法来更新当前页码，并重新查询数据。 为了实现数据的异步加载和渲染，我们可以使用Axios或Fetch等工具来发送HTTP请求，并接收服务器返回的数据。 最后，我们可以在Vue实例的mounted钩子函数中调用查询方法，来初始化数据并显示第一页的查询结果。 整个过程中，我们可以使用Vue的生命周期钩子函数来管理组件的生命周期，以便在适当的时候加载数据、监听事件、更新状态等。 通过以上步骤，我们就可以构建一个基本的Vue前端分页查询程序了。当用户输入查询条件并点击查询按钮时，程序将发送请求到后端服务器并获取分页查询结果，然后将结果显示在前端界面中。用户还可以通过按钮或链接来切换不同的页码，以便查看更多的查询结果。 ### 回答3： Vue是一个用于构建用户界面的渐进式JavaScript框架。使用Vue可以轻松地构建交互式的前端应用程序。下面是一个使用Vue实现前端分页查询的示例程序。 1. 在HTML文件中引入Vue和axios，axios是一个用于进行HTTP请求的库。 ```html <html> <head> <title>前端分页查询</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>前端分页查询</h1> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="person in persons" :key="person.id"> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.age}}</td> </tr> </tbody> </table> <div> <button @click="previousPage">上一页</button> <span>{{currentPage}}</span> <button @click="nextPage">下一页</button> </div> </div> <script src="script.js"></script> </body> </html> ``` 2. 在JavaScript文件中编写Vue实例和相关的方法。 ```javascript let app = new Vue({ el: '#app', data: { currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的记录数 totalRecords: 0, // 总记录数 persons: [] // 查询结果 }, mounted() { this.loadData(); // 初始化时加载数据 }, methods: { loadData() { let startIndex = (this.currentPage - 1) * this.pageSize; // 计算查询起始位置 let url = `https://example.com/api/persons?startIndex=${startIndex}&pageSize=${this.pageSize}`; axios.get(url) .then(response => { this.persons = response.data; // 将查询结果赋值给persons数组 this.totalRecords = response.headers['x-total-count']; // 获取总记录数 }) .catch(error => { console.log(error); }); }, previousPage() { if (this.currentPage > 1) { this.currentPage--; this.loadData(); // 加载上一页数据 } }, nextPage() { let totalPages = Math.ceil(this.totalRecords / this.pageSize); if (this.currentPage < totalPages) { this.currentPage++; this.loadData(); // 加载下一页数据 } } } }); ``` 以上示例程序实现了一个简单的前端分页查询功能。用户可以点击“上一页”和“下一页”按钮来切换分页，并且查询结果会根据当前页码和每页记录数进行动态加载。
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值