<template>
|
<el-pagination
|
:current-page.sync="syncCurrentPage"
|
layout="prev, pager, next"
|
:total="totalList.length"
|
:page-size="pageSize"
|
@current-change="handleCurrentChange"
|
class="mt-10"
|
>
|
</el-pagination>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit, Watch, PropSync } from 'nuxt-property-decorator';
|
import { Consultant } from '~/shared/models/consultant.model';
|
|
@Component
|
export default class UiPagination extends Vue {
|
@Prop()
|
totalList!: Consultant[];
|
|
@Prop({default: 5}) pageSize!: number;
|
@PropSync('currentPage', {default: 1}) syncCurrentPage!: number;
|
|
pageList: Consultant[] = [];
|
|
//////////////////////////////////////////////////////////////////
|
|
@Emit('changePage')
|
changePage(): Consultant[] {
|
return this.pageList
|
}
|
|
@Watch('totalList')
|
watchTotalList(newValue: Consultant[]) {
|
if (newValue) {
|
this.handleCurrentChange(this.syncCurrentPage);
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.handleCurrentChange(this.syncCurrentPage);
|
}
|
|
//////////////////////////////////////////////////////////////////
|
|
handleCurrentChange(currentPage: number) {
|
|
if (this.totalList.length <= this.pageSize && currentPage !== 1) {
|
currentPage -= 1;
|
}
|
|
if (this.totalList) {
|
this.pageList = this.totalList.slice(this.pageSize * currentPage - this.pageSize, this.pageSize * currentPage)
|
this.changePage();
|
}
|
}
|
}
|
</script>
|
