el-pagination设置尾页
时间: 2023-11-02 16:00:25 浏览: 97
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
el-pagination的尾页可以通过以下代码进行设置:
在data中添加一个变量来记录总页数:
```
data() {
return {
...
totalPages: 0,
...
}
}
```
在获取到总数据后,计算总页数并赋值给totalPages:
```
this.totalPages = Math.ceil(this.tablePage.tableTotal / this.tablePage.pageSize);```
然后,在定义的el-pagination组件中,将尾页按钮的disabled属性绑定到一个计算属性上:
```
<el-pagination
...
:disabled="isLastPage"
...
></el-pagination>
```
最后,编写计算属性来判断是否为最后一页:
```
computed: {
isLastPage() {
return this.tablePage.pageNo === this.totalPages;
},
},
```
这样,当处于最后一页时,尾页按钮将被禁用,从而达到设置尾页的效果。
阅读全文