对分页进行了二次封装
调用
<div class="pagination-container">
<div class="total-box">
<span class="total-num"
>共 {{ 100 }} 条</span
>
</div>
<pagination :total="total2"></pagination>
</div>
.pagination-container {
background: #fff;
padding: 32px 16px;
display: flex;
justify-content: center;
align-items: center;
}
.pagination-container .total-num{
margin-right: 10px;
font-weight: 400;
color: #606266;
display: inline-block;
font-size: 13px;
margin-top: -2px;
}
.pagination-container.hidden {
display: none;
}
只封装分页器,功能放出来以达到复用
<template>
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 15
},
layout: {
type: String,
default: 'prev, pager, next'
},
background: {
type: Boolean,
default: false
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
}
}
}
</script>