myPagination.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!--
  2. props:{
  3. size: 当前页的页数,
  4. sizes: 下拉的条数,
  5. total: 总条数,
  6. currentPage: 当前页
  7. }
  8. @change 发生改变
  9. -->
  10. <template>
  11. <div class="block">
  12. <el-pagination
  13. @size-change="handleSizeChange"
  14. @current-change="handleCurrentChange"
  15. :current-page.sync="page.currentPage"
  16. :page-sizes="page.sizes"
  17. :page-size="page.size"
  18. :layout=" isSmall ? 'total, sizes, prev, pager, next, jumper' : 'prev, pager, next'"
  19. :total="page.total">
  20. </el-pagination>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. name: "pagination",
  26. props: {
  27. page: {
  28. type: Object
  29. },
  30. isSmall:{
  31. type:Boolean,
  32. default: true
  33. }
  34. },
  35. methods: {
  36. //当前条数发生改变
  37. handleSizeChange(val) {
  38. this.page.size = val;
  39. this.page.currentPage = 1;
  40. this.change()
  41. },
  42. //当前页发生改变
  43. handleCurrentChange(val) {
  44. this.page.currentPage = val;
  45. this.change()
  46. },
  47. //发生改变
  48. change() {
  49. this.$emit("change");
  50. }
  51. }
  52. };
  53. </script>
  54. <style>
  55. .el-pagination button, .el-pagination span:not([class*=suffix]) {
  56. vertical-align: middle;
  57. }
  58. .block{
  59. /* margin-top: 5px; */
  60. }
  61. </style>