本篇继上篇封装分页组件进行了优化
上篇中每引用一次组件就要重复写一次改变分页页数handleCurrentChange和每页显示条数的方法handleSizeChange这两个方法,甚觉麻烦,因此进行了个小优化,将获取表格数据的方法传给分页子组件,使用callback进行数据重新渲染的调用。
废话不多说,直接贴代码了,以下是分页组件中的代码
<template>
<div>
<el-pagination
class="pagin"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:page-size="pageSize"
:page-sizes="[10 , 20, 30, 40, 50]"
@size-change="handleSizeChange"
:current-page="currentPage"
@current-change="handleCurrentChange"
:callback="callback"></el-pagination>
</div>
</template>
<script>
export default {
props: {
'total': Number,
'callback': Function
},
data () {
return {
pageSize: 10, // 每页显示条数
currentPag