pagination.js
<template>
<div class="pagination-container">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="comCurrentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total"
style="float: right">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'pagination',
data () {
return {
pageSize: this.pageSizes[0],
comCurrentPage: this.currentPage
}
},
props: {
layout: {
type: String,
default () {
return 'total, sizes, prev, pager, next, jumper'
}
},
pageSizes: { // 每页显示数量
type: Array,
default () {
return [10, 20, 50, 100]
}
},
total: { // 数据总量
type: Number,
required: true
},
currentPage: { // 当前页
type: Number,
default: 1
},
changeCallback: {
type: Function,
required: true
}
},
methods: {
/*
每页显示数量改变
* */
handleSizeChange (val) {
this.pageSize = val
this.changeCallback(this.comCurrentPage, this.pageSize)
},
/*
页面跳转
* */
handleCurrentChange (val) {
this.comCurrentPage = val
this.changeCallback(this.comCurrentPage, this.pageSize)
},
/*
刷新
* */
refresh () {
this.changeCallback(this.comCurrentPage, this.pageSize)
},
/*
搜素/初始化列表
* */
search () {
this.pageSize = this.pageSizes[0]
this.comCurrentPage = 1
this.changeCallback(this.comCurrentPage, this.pageSize)
}
}
}
</script>
index.js
<pagination ref="page" :total="total" :change-callback="getTableList"></pagination>
<script>
import pagination from '@/components/pagination'
export default {
components: { pagination },
data() {
return {
total: 0,
}
},
mounted() {
this.getTableList()
},
methods: {
search() {
this.$refs.page.search()
},
}
}
</script>