我们在开发后台管理系统的时候不可避免的会遇到列表分页需求，element 官方尽管已经帮我们封装好了,但是我们每次调用的时候依然要传递不少参数，看上去很复杂，为此我们可以以此封装一个自己的分页组件。
在开发之前我们需要清除自己需要的参数，我这里用的是这些。
pagination.png
接下来我们就开始正式封装我们的pagination组件。
<template>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[5, 10, 20, 30, 40, 50, 60, 80, 100]"
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="currentPage"
:page-size="limit"
:total="total"
:small="small">
</el-pagination>
</div>
</template>
<script>
export default {
name: "pagination",
data() {
return {
currentPage: 1
}
},
props: {
// 避免直接改变prop属性
// 'currentPage': {
// required: false,
// default: 1
// },
'total': {
required: false,
default: 0
},
'limit': {
required: false,
default: 10
},
'small': {
required: false,
type: Boolean,
default: false
}
},
watch: {
currentPage(val) {
// 改变这个值并不会触发 handleCurrentChange
if (typeof val === "number") {
console.log('prop currentPage!!!');
this.currentPage = val;
}
},
},
methods: {
// 当前页变化
handleCurrentChange(val) {
this.$emit("handleCurrentChange", val);
},
// size变化
handleSizeChange(val) {
this.currentPage = 1;
this.$emit('handleSizeChange', val);
},
}
}
</script>
<style scoped>
.pagination {
margin: 20px 0;
text-align: center;
}
</style>
这里有个小坑，不要尝试直接改变currentPage这个属性，因为当你切换分页的时候会触发改变prop属性，改放在data或computed中定义。
errorMessage.png
完成pagination组件的封装后，我们可以这样调用，这样省略了很多参数看上去简单多了。
<template>
<pagination :currentPage="currentPage" :total="total" :limit="limit" :small="true"
@handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"/>
</template>
<script>
import {invokeApi} from '@/service/api'
import pagination from "@framework/pagination"
export default {
name: "",
components: {
pagination
},
data() {
return {
dataList: [],
currentPage: 1,
limit: 10,
total: 0
}
},
methods: {
getDataList() {
let json = {
limit: this.limit,
page: this.currentPage
};
// 调用后端接口，这里是封装过的
invokeApi(json).then(res => {
this.dataList = res.list;
this.total = res.total;
});
},
handleCurrentChange(val) {
this.currentPage = val;
this.getDataList();
},
handleSizeChange(val) {
this.limit = val;
this.currentPage = 1;
this.getDataList();
}
},
created() {
this.getDataList();
}
}
</script>
