lui - pager - 分页

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

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

currentChange: pageNum => {
  Object.assign(this.options, {
    pageNum
  })
}