<template>
  <div>
		<h2>Basic Pagination</h2>
		<Panel :bodyStyle="{padding:'20px'}">
			<p>Total: {{total}}</p>
			<p>Page Number: {{pageNumber}}</p>
			<p>Page Size: {{pageSize}}</p>
			<template slot="footer">
				<Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber" @pageChange="onPageChange($event)"></Pagination>
			</template>
		</Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 114,
      pageNumber: 1,
      pageSize: 10
    };
  },
  methods: {
    onPageChange(event) {
      this.pageNumber = event.pageNumber;
      this.pageSize = event.pageSize;
    }
  }
};
</script>