【前端】若依框架学习笔记——分页(自定义选择每页条数)
v-show="queryParams.total > 0"：用于判断是否存在数据，有这显示，无不显示。
:total="queryParams.total"：显示数据总条数
:page.sync="queryParams.pageNum"：显示当前页码
:limit.sync="queryParams.pageSize"：显示数据条数
:pageSizes="queryParams.pageSizes": 选择每页条数
@pagination="getLists"：处理页码大小和当前页变动时候触发的事件
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_42748454/article/details/132467507
<!-- 分页条 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:pageSizes="queryParams.pageSizes"
@pagination="getList"
/>
<!-- 查询参数 -->
queryParams: {
pageNum: 1,
pageSize: 4,
pageSizes: [4, 6, 8, 10]
}
<!-- 若依封装el-pagination -->
ruoyi-ui\src\components\Pagination\index.vue
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
...
