adm-pagination.vue 915 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <el-pagination
  3. class="adm-pagination"
  4. @size-change="sizeChange"
  5. @current-change="currentPage"
  6. :page-sizes="paginationList.sizes"
  7. :page-size="paginationList.size"
  8. :current-page.sync="paginationList.page"
  9. layout="total,sizes,prev,pager,next,jumper"
  10. :total="paginationList.total"
  11. />
  12. </template>
  13. <script lang="ts">
  14. // 当前页,总数,范围
  15. interface Pagination {
  16. page:number,
  17. size: number
  18. total: number
  19. sizes: []
  20. }
  21. import { Vue, Component, Emit, Prop } from "vue-property-decorator";
  22. @Component({
  23. name: 'adm-pagination'
  24. })
  25. export default class extends Vue {
  26. @Prop({ type: Object, default: {} }) paginationList ?: Pagination
  27. @Emit('currentPage')
  28. currentPage(val: number) {
  29. return val
  30. }
  31. sizeChange(val:number) {
  32. console.log(val)
  33. }
  34. }
  35. </script>
  36. <style scoped>
  37. </style>