您的位置:首页 > 编程学习 > > 正文

vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)

更多 时间:2022-01-20 00:25:25 类别:编程学习 浏览量:1949

vue加element ui弹窗

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

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

一、概要

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

vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)

二、实现

1、基本用法

  • <li 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"
        />
    </li>
    
  • 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(每页多少条)。

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

    您可能感兴趣