一般写后台系统都会有很多的列表,有列表就相应的要用到分页,根据项目中写的几个分页写一下我对分页的理解,就当是学习笔记了。
这是Element-ui提供的完整的例子
<template> <div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
: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>
以下是我自己在项目中用到的分页
<div style="float:right;margin-top:20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" //写代码时忘记把pageSize赋值给:page-size了,
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
没什么好的内容,就是给自己做个学习笔记吧