vue print nb 设置页码
时间: 2023-07-01 21:29:26 浏览: 54
您可以使用 ElementUI 的 Pagination 分页组件来实现页码的设置,具体步骤如下:
1. 在需要显示分页组件的页面中引入 Pagination 组件:
```
<template>
<div>
<!-- 其他内容 -->
<el-pagination
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="handlePageChange"
@size-change="handleSizeChange" />
</div>
</template>
```
2. 在 data 中定义分页相关的变量:
```
data() {
return {
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示数量
total: 100 // 总条数
}
}
```
3. 实现 handlePageChange 和 handleSizeChange 方法,分别处理页码和每页显示数量的变化:
```
methods: {
handlePageChange(page) {
this.currentPage = page;
// 根据新的页码获取数据
// ...
},
handleSizeChange(size) {
this.pageSize = size;
this.currentPage = 1; // 每页显示数量变化时,重置为第一页
// 根据新的每页显示数量获取数据
// ...
}
}
```
4. 根据 currentPage 和 pageSize 去后台获取数据,并将总条数 total 更新到分页组件中。
以上是使用 ElementUI 的 Pagination 组件来实现页码的设置的方法,希望能对您有所帮助。