index.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <div :class="{ hidden: hidden }" class="pagination">
  3. <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :background="background"
  4. :layout="layout" :page-sizes="pageSizes" :total="total" @size-change="handleSizeChange"
  5. @current-change="handleCurrentChange" :style="`float:${position} `" />
  6. </div>
  7. </template>
  8. <script setup lang="ts">
  9. const props = defineProps({
  10. total: {
  11. required: true,
  12. type: Number as PropType<number>,
  13. default: 0,
  14. },
  15. page: {
  16. type: Number,
  17. default: 1,
  18. },
  19. limit: {
  20. type: Number,
  21. default: 20,
  22. },
  23. pageSizes: {
  24. type: Array as PropType<number[]>,
  25. default() {
  26. return [10, 20, 30, 50];
  27. },
  28. },
  29. layout: {
  30. type: String,
  31. default: "total, sizes, prev, pager, next, jumper",
  32. },
  33. background: {
  34. type: Boolean,
  35. default: true,
  36. },
  37. autoScroll: {
  38. type: Boolean,
  39. default: true,
  40. },
  41. hidden: {
  42. type: Boolean,
  43. default: false,
  44. },
  45. position: {
  46. type: String,
  47. default: "left",
  48. },
  49. });
  50. const emit = defineEmits(["pagination", "update:page", "update:limit"]);
  51. const currentPage = useVModel(props, "page", emit);
  52. const pageSize = useVModel(props, "limit", emit);
  53. function handleSizeChange(val: number) {
  54. emit("pagination", { page: currentPage.value, limit: val });
  55. }
  56. function handleCurrentChange(val: number) {
  57. currentPage.value = val;
  58. emit("pagination", { page: val, limit: props.limit });
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. .pagination {
  63. padding: 12px;
  64. &.hidden {
  65. display: none;
  66. }
  67. }
  68. </style>