Pagination.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <el-pagination
  3. @size-change="handleSizeChange"
  4. @current-change="handleCurrentChange"
  5. :current-page="page"
  6. :page-sizes="pageSizes"
  7. :page-size="size"
  8. layout="total, sizes, prev, pager, next, jumper"
  9. :total="total">
  10. </el-pagination>
  11. </template>
  12. <script>
  13. import { paginationServiceData } from './paginationData';
  14. export default {
  15. name: 'Pagination',
  16. props: {
  17. pageSizes: {
  18. type: Array,
  19. default: () => [100, 200, 300, 400]
  20. }
  21. },
  22. computed: {
  23. page: {
  24. get () {
  25. return paginationServiceData.page;
  26. },
  27. set(val) {
  28. paginationServiceData.size = val;
  29. }
  30. },
  31. size: {
  32. get () {
  33. return paginationServiceData.size;
  34. },
  35. set(val) {
  36. paginationServiceData.size = val;
  37. }
  38. },
  39. total: {
  40. get() {
  41. return paginationServiceData.total;
  42. },
  43. set(val) {
  44. this.paginationServiceData.total = val;
  45. }
  46. }
  47. },
  48. methods: {
  49. handleSizeChange() {},
  50. handleCurrentChange() {},
  51. }
  52. };
  53. </script>
  54. <style scoped>
  55. </style>