pager - 分页

demo

lui

demo

<template>

  <div class="app-container">

    <h3>el-pagination</h3>

    <el-pagination

      :current-page="options.pageNum"

      :page-size="options.pageSize"

      :pager-count="7"

      :layout="options.layout"

      :total="options.total"

    />

    <h3>l-pager</h3>

    <l-pager :options="options" />

  </div>

</template>

<script>

export default {

  data() {

    return {

      options: {

        pageNum: 1,

        pageSize: 15,

        // pagerCount: 4,

        total: 1000,

        layout: 'prev, pager, next, jumper, sizes, total',

        currentChange: pageNum => {

          // console.log(`当前页: ${pageNum}`, this.options)

          Object.assign(this.options, {

            pageNum

          })

        }

      }

    }

  }

}

</script>

Attributes

参数	说明	类型	可选值	默认值
options	设置	Object	—	—

options

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
hideOnSinglePage	只有一页时是否隐藏	boolean	—	false
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, sizes, total'
pageSizes	每页显示个数选择器的选项设置	Array	—	[15, 20, 30, 40]
pageNum	当前页数	number	—	1
pageSize	每页显示条目个数	number	—	15
total	总条目数	number	—	—
pagerCount	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的整数	6
sizeChange	pageSize 改变时会触发	Function(pageSize)	—	—
currentChange	pageNum 改变时会触发	Function(pageNum)	—	—

Events

参数	说明	回调参数
—	—	—

notice

修复分页器中间页数显示bug
pagerCount双数时，pagerCount页码未显示
问题原理:element不支持双数,处理原理为在双数+1,再隐藏pagerCount页
解决:currentChange函数为pageNum重新赋值,触发 重新渲染,初始化隐藏pagerCount状态

currentChange: pageNum => {

  Object.assign(this.options, {

    pageNum

  })

}

lui - pager - 分页的相关教程结束。