v3.9.2+
Pagination 分页Pagination 组件主要是基于 Element 的 el-pagination
进行了二次封装,并拓展了自动滚动的功能。
使用方式
<template>
<pagination
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList" />
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
components: { Pagination },
data() {
return {
total: 0,
listQuery: {
page: 1,
limit: 20
}
}
},
methods: {
getList() {
// 获取数据
}
}
}
</script>
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
total | 总条目数 | Number | / |
page | 当前页数 支持 .sync 修饰符 | Number | 1 |
limit | 每页显示条目个数,支持 .sync 修饰符 | Number | 20 |
page-sizes | 每页显示个数选择器的选项设置 | Number [] | 10, 20, 30, 50] |
hidden | 是否隐藏 | Boolean | false |
auto-scroll | 分页之后是否自动滚动到顶部 | Boolean | true |
其它 Element 的 el-pagination
支持的属性,它也都支持。详情见文档
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
pagination | 当 limit 或者 page 发生改变时会触发 | {page,limit} |