page.vue
<template>
<div class="m-page">
<Page style="margin-top:8px;"
:current="pageParam.pageNum"
:page-size-opts="pageSizeOpts"
:page-size="pageParam.pageSize"
:total="pageParam.total"
show-elevator
show-total
show-sizer
@on-change="changePageNum"
@on-page-size-change="changePageSize" />
</div>
</template>
<script>
export default {
name: 'mPage',
props: {
pageParam: {
type: Object,
default () {
return {total: 0, pageSize: 30, pageNum: 1}
}
},
pageSizeOpts: {
type: Array,
default () {
return [30, 60, 90]
}
},
queryFun: {
type: Function
}
},
data () {
return {
}
},
mounted () {
},
methods: {
changePageSize (size) {
this.pageParam.pageSize = size
this.queryFun(true)
},
changePageNum (num) {
this.pageParam.pageNum = num
this.queryFun()
},
}
}
</script>
<style lang="less">
</style>
index.js
import MPage from './page.vue'
export default (Vue)=>{
Vue.component("MPage", MPage)
}
使用页面
<m-page :pageParam="pageParam" :queryFun="queryFun"></m-page>
data(){
return {
pageParam: {
total: 0,
pageSize: 30,
pageNum: 1
},
}
}
methods: {
// 列表数据查询
queryFun (isCheck) {}
}