tablePagination.vue 1007 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <div class="pagination-con" v-if="total!=0">
  3. <a-pagination
  4. size="small"
  5. :total="total"
  6. :current="current"
  7. :pageSize="pageSize"
  8. show-size-changer
  9. :show-total="total => `共 ${total} 条记录`"
  10. @showSizeChange="changePageSize"
  11. @change="changePage" />
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'TablePagination',
  17. props: {
  18. total: {
  19. type: [String, Number],
  20. default: 0
  21. },
  22. current: {
  23. type: [String, Number],
  24. default: 1
  25. },
  26. pageSize: {
  27. type: [String, Number],
  28. default: 20
  29. }
  30. },
  31. data () {
  32. return {}
  33. },
  34. methods: {
  35. // 分页 一页多少条change
  36. changePageSize (current, pageSize) {
  37. this.$emit('changePageSize', current, pageSize)
  38. },
  39. // 分页 页码change
  40. changePage (current) {
  41. this.$emit('changePage', current)
  42. }
  43. }
  44. }
  45. </script>
  46. <style lang="less">
  47. .pagination-con{
  48. text-align: right;
  49. margin: 10px 0;
  50. }
  51. </style>