在Element UI中,分页组件<el-pagination>
的page-count
属性用于指定总页数。如果你想动态设置最大页数,可以使用v-model:page-count
来绑定一个响应式数据属性。
以下是一个简单的例子,展示如何动态设置最大页数:
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:page-count="totalPageCount"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 1000, // 假设总数据量为1000
totalPageCount: 1, // 初始化最大页数
};
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.updateTotalPageCount();
},
handleCurrentChange(val) {
this.currentPage = val;
this.updateTotalPageCount();
},
updateTotalPageCount() {
// 计算最大页数
this.totalPageCount = Math.ceil(this.total / this.pageSize);
}
},
mounted() {
this.updateTotalPageCount(); // 组件加载完成后更新最大页数
}
};
</script>
在这个例子中,totalPageCount
是一个响应式数据属性,它会根据total
和pageSize
动态计算得到。每当pageSize
或total
发生变化时,updateTotalPageCount
方法会被调用,更新totalPageCount
的值,这样<el-pagination>
组件的page-count
属性就会相应地更新最大页数。