BasePagination.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <el-pagination
  3. @size-change='handleSizeChange'
  4. @current-change='handleCurrentChange'
  5. :current-page='currentPages?currentPages:pageInfo.currentPage'
  6. :page-sizes='pageInfo.pageSizes'
  7. :page-size='pageInfo.pageSize'
  8. :layout='pageInfo.layout'
  9. :total='pageInfo.total'
  10. style='text-align: center'
  11. ></el-pagination>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'base-pagination',
  16. props: ['total', 'customconfig', 'currentPages'],
  17. data() {
  18. var vm = this
  19. let pageInfo = this.initPagination()
  20. if (!!this.total) {
  21. pageInfo.total = this.total
  22. }
  23. //分页器可添加自定义的配置,在引用的时候,需要传递参数,如果有参数,就合并
  24. if (!!this.customconfig) {
  25. pageInfo = Object.assign(pageInfo, this.customconfig)
  26. }
  27. return {
  28. pageInfo: pageInfo
  29. }
  30. },
  31. methods: {
  32. handleSizeChange: function(size) {
  33. this.pageInfo.pageSize = size
  34. this.$emit('pageChanged', this.pageInfo.currentPage, this.pageInfo.pageSize)
  35. },
  36. handleCurrentChange: function(currentPage) {
  37. this.pageInfo.currentPage = currentPage
  38. this.$emit('pageChanged', this.pageInfo.currentPage, this.pageInfo.pageSize)
  39. }
  40. },
  41. watch: {
  42. total: function() {
  43. this.pageInfo.total = this.total
  44. },
  45. currentPages: {
  46. immediate: true,
  47. handler(val) {
  48. this.pageInfo.currentPage = val
  49. }
  50. }
  51. }
  52. }
  53. </script>