VueBootstrapPaginationExample.vue 817 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div>
  3. <h1>分页控件</h1>
  4. <VueBootstrapPagination
  5. :pagination="pagination"
  6. :callback="query"
  7. />
  8. </div>
  9. <div>开始:{{ start }} 长度: {{ length }}</div>
  10. </template>
  11. <script>
  12. import VueBootstrapPagination from '@/vue-bootstrap-pagination/index.js';
  13. export default {
  14. components: {
  15. VueBootstrapPagination,
  16. },
  17. data: function () {
  18. return {
  19. pagination: {
  20. total: 100,
  21. per_page: 10, // required
  22. current_page: 1, // required
  23. last_page: 10, // required
  24. },
  25. start: '',
  26. length: '',
  27. };
  28. },
  29. methods: {
  30. query: function () {
  31. this.start = (this.pagination.current_page - 1) * this.pagination.per_page;
  32. this.length = this.pagination.per_page;
  33. },
  34. },
  35. };
  36. </script>
  37. <style>
  38. </style>