Vue 中基于element-ui二次封装Pagination分页组件
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 5, 10]"
:page-size="pageSize"
:layout="layout"
:total="total"
>
</el-pagination>
</template>
<script>
export default {
props: {
currentPage: {
type: [String, Number],
default: 1,
},
total: {
type: [String, Number],
default: 0,
},
pageSizes: {
type: Array,
default: () => [10, 15, 30, 50],
},
pageSize: {
type: [String, Number],
default: 10,
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper",
},
},
data() {
return {};
},
methods: {
handleSizeChange(val) {
this.$emit("sizeChange", val);
},
handleCurrentChange(val) {
this.$emit("currentChange", val);
},
},
};
</script>
<style lang="less" scoped>
.page {
text-align: center;
color: #409eff;
}
</style>
使用组件
<template>
<Pagination @sizeChange='handleSizeChange'
:pageSize='pageSize'
@currentChange='handleCurrentChange'
:currentPage='currentPage' :total='total'></Pagination>
</template>
<script>
import qs from 'qs'
import Pagination from '@/components/utils/Pagination'
export default {
components: {
Pagination,
},
data() {
return {
globalList: [],
pageSize: 1,
currentPage: 1,
total: 1,
}
},
created() {
this.getNewsList(this.tag)
},
methods: {
getNewsList(tagName) {
console.log(tagName)
const param = {
'page': this.currentPage,
'size': this.pageSize,
}
this.$axios({
url: "/api/art/findTag",
method: "post",
data: qs.stringify(param)
}).then(res => {
console.log(res)
this.globalList = res.data.data.list
this.currentPage = res.data.data.pageNum
this.pageSize = res.data.data.pageSize
this.total = res.data.data.total
console.log(JSON.stringify(res.data.data.total))
});
},
handleSizeChange(newSize) {
console.log(newSize)
this.pageSize = newSize
this.getNewsList()
},
handleCurrentChange(newSize) {
console.log("111:" + newSize)
this.currentPage = newSize
this.getNewsList()
},
},
}
</script>