el-pagenation page-count 设置为1时,还是会显示两个页码,如何实现只展示当前页码
时间: 2024-10-22 08:04:20 浏览: 12
Vue+Element UI+Lumen实现通用表格分页功能
`el-pagination` 的 `page-count` 属性用于显示页码总数,当你设置为1时,理论上应该只显示当前页。然而,Element UI 的设计可能会显示一些额外的空白页,以防止用户误解为无更多页面的情况。为了实现在 `page-count` 为1时只显示当前页码,你需要稍微做一些自定义样式和逻辑。
首先,在CSS中隐藏不必要的页码元素,例如:
```css
.el-pagination li.next, .el-pagination li.prev, .el-pagination li.first, .el-pagination li.last {
display: none;
}
```
然后,你可以将页码标签替换为一个动态生成的元素,只显示当前页:
```html
<template>
<div class="custom-pagination">
<span v-else>{{ currentPage }}</span> / {{ totalPages }}
</div>
</template>
```
在JS中保持对 `currentPage` 和 `totalPages` 的同步更新:
```js
data() {
return {
currentPage: 1,
totalPages: 1, // 这里假设只有一个页面
};
},
```
这样,无论 `page-count` 设置为何值,都会只显示当前页。如果实际总页数大于1,`totalPages` 需要相应地增加。
阅读全文