sf-pagination 分页组件
sf-pagination 介绍
该组件是对el-pagination组件进行了二次封装
sf-table中已集成该组件，当sf-table无法满足业务时可使用该组件
注：本文只罗列出封装的一些属性/方法，其余为Element组件原生属性
参照Element-UI官方文档
https://element.eleme.cn/#/zh-CN/component/dialog
sf-pagination Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| total | 总条目数 | Number | — | — |
| page | 当前页 | Number | — | 1 |
| limit | 每页显示数 | Number | — | 20 |
| pageSizes | 每页显示个数选择器的选项设置 | Number[] | — | [10, 20, 50] |
| layout | 组件布局，子组件名用逗号分隔 | String | — | 'total, sizes, prev, pager, next, jumper' |
| background | 是否为分页按钮添加背景色 | Boolean | true, false | true |
| autoScroll | 是否在翻页完成时将滚动条滚到最上方 | Boolean | true, false | true |
| hidden | 是否隐藏 | Boolean | true, false | false |
sf-pagination Events
| 方法名 | 说明 | 参数 |
|---|---|---|
| pagination | 当前页和每页显示数的改变时会触发 | (page, limit) |
sf-pagination 组件使用
<template>
<div>
<sf-pagination
ref="pagination"
:total="totalCount"
:page.sync="pageParamData.current"
:limit.sync="pageParamData.pageSize"
@pagination="pageHandle"
></sf-pagination>
</div>
</template>
<script >
export default {
data() {
return {
pageParamData: {
current: 1,
pageSize: 10
},
totalCount: 0
}
},
methods: {
pageHandle() {}
}
}
</script>
页面显示效果
