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