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

Z时代
2024-01-10
分类：IT

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
}