分页想必大家都写过,后台管理项目分页是必不可少的,话不多说,上代码
Paging组件
<template>
<!-- 分页组件的封装 -->
<div class="pagination">
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:page-sizes="[1,5,10,15,,20]"
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="pageNum"
:page-size="pageSize"
:total="total"
:small="small">
</el-pagination>
</div>
</template>
<script>
export default {
name: "Paging",
data () {
return {
pageNum: 1 //当前页数
}
},
//子组件接收父组件的值
props:{
'total': { //总条目数
required: false,//是否必须
default: 0 //默认值
},
'pageSize': {
required: false, //是否必须
default: 10 //默认值(默认显示10条)
},
'small': { //是否使用小型分页样式
required: false, //是否必须
type: Boolean, //类型
default: false //默认值
}
},
//计算属性 计算属性是基于他们的依赖做缓存
// (如果计算的逻辑大的话,可以用这个,比方说你先循环100次,再循环1000次,他会把上一次的循环也加上去,也就是缓存)
computed: {
},
//侦听器 响应数据的变化
watch: {
//监听页数变化
pageNum(val,index) {
console.log(val); //值
console.log(index);//下标
// 改变这个值并不会触发 handleCurrentChange
if (typeof val &#