一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结:
<template> <div class="block">
<el-pagination
@size-change="handleSizeChange" // pageSize改变时会触发
@current-change="handleCurrentChange" // currentPage改变时会触发
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"// 这是下拉框可以选择的,选择一夜显示几条数据
:page-size="100" // 这是当前煤业显示的条数
layout="total, sizes, prev, pager, next, jumper"
:total="400" // 这个是总共有多少条数据,把后台获取到的数据总数复制给total就可以了
>
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(‘每页’ val ‘条’);
},
handleCurrentChange(val) {
console.log(`当前页:` val);
}
},
data() {
return {
total:'0',
currentPage: 4
};
}
}
</script>
另外也发现了一篇比较好的博客,可参考:https://blog.csdn.net/zhumengzj/article/details/78194044?locationNum=6&fps=1
其实也没有什么好的内容,只是今天在做项目时遇到了,并且学习了这个组件,相当于在此做个笔记吧!
更多专业前端知识,请上 【猿2048】www.mk2048.com