Vue中ElementUI分页组件Pagination的使用方法

 更新时间:2021年05月31日 10:08:44   作者:G.E.M.千百度  
这篇文章主要为大家详细介绍了Vue中ElementUI分页组件Pagination的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下

一、概要

ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页。

二、实现

1、基本用法

<div class="pagination">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="tablePage.pageNum"
      :page-size="tablePage.pageSize"
      :page-sizes="pageSizes"
      :total="tablePage.total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />
</div>
data() {
    return {
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 10, // 每页多少条
        total: 0 // 总记录数
      },
      pageSizes: [10, 20, 30]
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新数据
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新数据
    }
  }

2、后端分页的实现

实现思路:向后台发送请求,传入pageNum、pageSize两参数,直接得到相应的分页数据。

// 获取数据
getData() {
      let param = {
        pageNum: this.tablePage.pageNum,
        pageSize: this.tablePage.pageSize
      }
      // 请求后台接口函数
      getDataApi(param, { loading: true }).then(res => {
        // 后台返回数据
        this.list = res.data.list
        this.tablePage.total = res.data.total
      })
    },

3、前端分页的实现

实现思路:向后台发送请求,获取全部数据,前端通过pageNum、pageSize对数据进行处理,最终得到相应的分页数据。以下是处理数据得两种方法:

1、利用 Array.slice 截取想要的数组片段( 此方法要考虑 总页数为“1” 和 尾页 的情况)
2、利用 Array.filter 过滤出想要的数组片段(此方法无需考虑 总页数为“1” 和 尾页 的情况,只要满足条件即可

/**
     * 分页数据处理
     * @param data [Array] 需要分页的数据
     * @param num [Number] 当前第几页
     * @param size [Number] 每页显示多少条
*/
    getList(data, num, size) {
      let list, total, start, end, isFirst, isLast
      total = data.length
      isFirst = total < size
      isLast = Math.ceil(total / size) === num
      start = (num - 1) * size
      end = isFirst || isLast ? start + (total % size) : start + size
      list = data.slice(start, end)
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    }
    /**
     * 分页数据处理
     * @param data [Array] 需要分页的数据
     * @param num [Number] 当前第几页
     * @param size [Number] 每页显示多少条
     */
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
}

总结:无论是前端分页和还是后端分页,最终都需要拿到两个参数:pageNum(当前页)、pageSize(每页多少条)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue2和Vue3中常用组件通信用法分享

    Vue2和Vue3中常用组件通信用法分享

    这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,值得收藏
    2023-04-04
  • vue中路由参数传递可能会遇到的坑

    vue中路由参数传递可能会遇到的坑

    这篇文章主要给大家介绍了关于vue中路由参数传递遇到的坑的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • Vue3造轮子之Typescript配置highlight过程

    Vue3造轮子之Typescript配置highlight过程

    这篇文章主要介绍了Vue3造轮子之Typescript配置highlight过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue3中$refs的基本使用方法

    vue3中$refs的基本使用方法

    在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,下面这篇文章主要给大家介绍了关于vue3中$refs的基本使用方法,需要的朋友可以参考下
    2022-03-03
  • 详解Vue中如何避免滥用watch

    详解Vue中如何避免滥用watch

    这篇文章主要为大家详细介绍了Vue中滥用watch带来的问题以及如何解决,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue实现Base64编码与解码的代码示例

    Vue实现Base64编码与解码的代码示例

    在Web开发中,Base64编码常用于将二进制数据转换为文本字符串,以便在网络上传输,在Vue.js应用中,Base64编码广泛应用于图像的嵌入,本文将详细介绍如何在Vue.js中实现Base64编码与解码,并提供多种示例和实现思路,需要的朋友可以参考下
    2024-09-09
  • vue长按事件touch示例详解

    vue长按事件touch示例详解

    这篇文章主要介绍了vue长按事件touch,文末给大家补充介绍了Vue长按触摸事件的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • 多个vue项目复用一个node_modules的问题

    多个vue项目复用一个node_modules的问题

    这篇文章主要介绍了多个vue项目复用一个node_modules的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中element 上传功能的实现思路

    vue中element 上传功能的实现思路

    这篇文章主要介绍了vue中element 的上传功能的实现思路,本文大概通过两种实现思路,具体内容详情大家跟随脚本之家小编一起看看吧
    2018-07-07
  • 如何查看vue项目的node版本

    如何查看vue项目的node版本

    文章总结:查看Vue项目中使用的Node版本,特别是当项目使用Yarn和TypeScript时,可以通过查看yarn.lock文件中的@types/node@version来确定版本
    2025-01-01

最新评论