1. Pagination分页
1.1. Pagination分页当数据量过多时，使用分页分解数据。
1.2. Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| small | 是否使用小型分页样式 | boolean | 无 | false |
| background | 是否为分页按钮添加背景色 | boolean | 无 | false |
| page-size | 每页显示条目个数, 支持.sync修饰符 | number | 无 | 10 |
| total | 总条目数 | number | 无 | 无 |
| page-count | 总页数, total和page-count设置任意一个就可以达到显示页码的功能; 如果要支持page-sizes的更改, 则需要使用total属性 | number | 无 | 无 |
| pager-count | 页码按钮的数量, 当总页数超过该值时会折叠 | number | 大于等于5且小于等于21的奇数 | 7 |
| current-page | 当前页数, 支持.sync修饰符 | number | 无 | 1 |
| layout | 组件布局, 子组件名用逗号分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | number[] | 无 | [10, 20, 30, 40, 50, 100] |
| popper-class | 每页显示个数选择器的下拉框类名 | string | 无 | 无 |
| prev-text | 替代图标显示的上一页文字 | string | 无 | 无 |
| next-text | 替代图标显示的下一页文字 | string | 无 | 无 |
| disabled | 是否禁用 | boolean | 无 | false |
| hide-on-single-page | 只有一页时是否隐藏 | boolean | 无 | 无 |
1.3. Events
| 事件名称 | 说明 | 回调参数 |
| size-change | pageSize改变时会触发 | 每页条数 |
| current-change | currentPage改变时会触发 | 当前页 |
| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
1.4. Slot
| name | 说明 |
| — | 自定义内容, 需要在layout中列出slot |
2. Pagination分页例子
2.1. 使用脚手架新建一个名为element-ui-pagination的前端项目, 同时安装Element插件。
2.2. 在components在新建Pagination.vue?
<template>
<div>
<h1>基础用法</h1>
<h4>total总条目数。page-size每页显示条目个数, 默认是10。current-page当前页数。hide-on-single-page只有一页时是否隐藏。</h4>
<div class="block">
<span>页数较少时的效果</span>
<el-pagination :total="50"></el-pagination>
</div>
<div class="block">
<span>大于7页时的效果</span>
<el-pagination :total="1000" :page-size="100" :current-page="2" hide-on-single-page></el-pagination>
</div>
<h1>设置最大页码按钮数</h1>
<h4>默认情况下, 当总页数超过7页时, Pagination会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。</h4>
<el-pagination :pager-count="11" :total="1000" :current-page.sync="curPage"></el-pagination>
<h1>带有背景色的分页</h1>
<h4>设置background属性可以为分页按钮添加背景色。prev-text替代图标显示的上一页文字。next-text替代图标显示的下一页文字。</h4>
<el-pagination background :total="1000" prev-text="上一页" next-text="下一页"></el-pagination>
<h1>小型分页</h1>
<h4>在空间有限的情况下, 可以使用简单的小型分页。只需要一个small属性, 它接受一个Boolean, 默认为false, 设为true即可启用。</h4>
<h4>size-change事件, 当pageSize改变时会触发。current-change事件, 当currentPage改变时会触发。</h4>
<el-pagination small :total="50" @size-change="hdlSizCha" @current-change="hdlCurCha"></el-pagination>
<h1>布局组件</h1>
<h4>page-sizes每页显示个数选择器的选项设置。</h4>
<h4>设置layout, 表示需要显示的内容, 用逗号分隔, 布局元素会依次显示。prev表示上一页, next为下一页, pager表示页码列表, 特殊的布局符号->后的元素会靠右显示, jumper表示跳页元素, total表示总条目数, size用于设置每页显示的页码数量。</h4>
<el-pagination :total="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
</template>
<script>
export default {
methods: {
hdlSizCha (val) {
console.log(`每页 ${val} 条`)
},
hdlCurCha (val) {
console.log(`当前页: ${val}`)
}
},
data () {
return {
curPage: 5
}
}
}
</script>2.3. 访问http://localhost:8080/#/Pagination
