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
})
}