pagination.vue 987 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div class=" flex-x-center">
  3. <el-pagination
  4. align="center"
  5. background
  6. layout="prev, pager, next,jumper"
  7. :current-page.sync="currentPage"
  8. :page-size.sync="pageSize"
  9. :total="total"
  10. v-bind="$attrs"
  11. @size-change="handleSizeChange"
  12. @current-change="handleCurrentChange"
  13. />
  14. </div>
  15. </template>
  16. <script>
  17. // 滚动
  18. export default {
  19. name: 'Pagination',
  20. props: {
  21. total: {
  22. required: true,
  23. type: Number
  24. },
  25. page: {
  26. type: Number,
  27. default: 1
  28. },
  29. pageSize:{
  30. type: Number,
  31. default: 15
  32. },
  33. },
  34. computed: {
  35. currentPage: {
  36. get () {
  37. return this.page
  38. },
  39. set (val) {
  40. this.$emit('update:page', val)
  41. }
  42. },
  43. },
  44. methods: {
  45. handleSizeChange (val) {
  46. this.$emit('pagination', { page: this.currentPage })
  47. },
  48. handleCurrentChange (val) {
  49. this.$emit('pagination', { page: val })
  50. }
  51. }
  52. }
  53. </script>