最近在写前端页面的时候，有一个小需求就是保证分页插件一直保持在底部，表单数据增多的时候出现竖向的滚动条。
直接上代码
<el-card class="footer" v-if="total > 0">
<!-- 分页插件 -->
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="this.queryParams.pageNum"
:page-sizes="[10, 20, 30]"
:page-size="this.queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</el-card>
return {
queryParams: {
pageNum: 1,
pageSize: 10,
}
}
methods:{
handleSizeChange(val) {
this.queryParams.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.getList(val);
},
}
样式文章来源：https://www.toymoban.com/news/detail-509706.html
.footer {
z-index: 500;
position: fixed;
bottom: 0;
width: 100%;
line-height: var(--footer-height);
color: #fff;
}
效果展示
文章来源地址https://www.toymoban.com/news/detail-509706.html
到了这里，关于vue element-ui分页插件 始终保持在页面底部样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
