<template>
  <div>
    <h1>分页控件</h1>
    <VueBootstrapPagination
      :pagination="pagination"
      :callback="query"
    />
  </div>

  <div>开始：{{ start }} 长度： {{ length }}</div>
</template>

<script>


import VueBootstrapPagination from '@/vue-bootstrap-pagination/index.js';

export default {

  components: {
    VueBootstrapPagination,
  },

  data: function () {
    return {
      pagination: {
        total: 100,
        per_page: 10, // required
        current_page: 1, // required
        last_page: 10, // required
      },

      start: '',
      length: '',
    };
  },

  methods: {
    query: function () {
      this.start = (this.pagination.current_page - 1) * this.pagination.per_page;
      this.length = this.pagination.per_page;
    },
  },
};
</script>

<style>
</style>
