1、父组件引用
<template>
<MyPagination :total="total1" :pageNum="pageNum1" :pageSize="pageSize1" @handlePageNum="handlePageNum1" @handlePageSize="handlePageSize1"></MyPagination>
</template>
<script>
import MyPagination from '@/components/MyPagination';
export default {
components: {
MyPagination
},
data(){
return{
total1: 0,
pageSize1: 10,
sizeOpt: [10, 20, 30],
}
},
methods:{
handlePageNum1(data) {
this.pageNum1 = data
this.searchList1()
},
handlePageSize1(data) {
this.pageSize1 = data
this.searchList1()
},
}
}
</script>
2、子组件
<template>
<Page v-if="total==0" class="paginationPage" placement="top" :total="total" show-total show-sizer :current="pageNum"
:page-size-opts="sizeOpt" @on-change="handlePageNum"
@on-page-size-change="handlePageSize"></Page>
</template>
<script>
import { Modal, Cascader,Spin } from 'iview'
export default {
components: { Modal, Cascader},
props: {
showPagination:{
type: Boolean,
default: true
},
total: {
},
pageNum: {
},
pageSize: {
},
sizeOpt:[Array]
},
name: "MyPagination",
data () {
return {
// canAdd:true,
// active: false,
// modal: false,
// modalCus: false,
// showPagination:true,
// total: 0,
// pageNum: 1,
// sizeOpt: [10, 20, 30],
}
},
created () {
},
methods: {
init () {
},
handlePageNum (data) {
this.$emit('handlePageNum',data);
},
handlePageSize(data) {
this.$emit('handlePageSize',data);
},
}
}
</script>
<style lang="less">
.paginationPage {
float: right;
margin-top: 24px;
}
</style>