<template>
|
<el-pagination
|
:current-page.sync="currentPage"
|
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 } from 'nuxt-property-decorator';
|
import { Agents } from '~/plugins/api/home';
|
|
@Component
|
export default class UiPagination extends Vue {
|
@Prop() totalList!: Agents[];
|
pageSize = 5;
|
currentPage = 1;
|
pageList: Agents[] = [];
|
|
mounted() {
|
this.handleCurrentChange(this.currentPage);
|
}
|
|
@Emit('changePage') chagnePage(): Agents[] {
|
return this.pageList
|
}
|
|
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.chagnePage();
|
}
|
}
|
|
@Watch('totalList') watchtotalList(newValue: Agents[]) {
|
if (newValue) {
|
this.handleCurrentChange(this.currentPage);
|
}
|
}
|
}
|
</script>
|
