一般在写前端页面时,经常会遇到分页这样的效果,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
其实也没有什么好的内容,只是今天在做项目时遇到了,并且学习了这个组件,相当于在此做个笔记吧!