lui - pager - 分页

2022-08-18 15:33:48 阅读：179 来源： 互联网

标签：pagerCount 分页 pageSize pageNum lui total pager options

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
1. pagerCount双数时，pagerCount页码未显示
  1. 问题原理:element不支持双数,处理原理为在双数+1,再隐藏pagerCount页
  2. 解决:currentChange函数为pageNum重新赋值,触发重新渲染,初始化隐藏pagerCount状态

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

标签：pagerCount,分页,pageSize,pageNum,lui,total,pager,options
来源： https://www.cnblogs.com/zc-lee/p/16598849.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。