xjc_pagination.vue 917 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div style="width: 100%;height: 100px;">
  3. <pagination v-show="pageProps.total" :total="pageProps.total" v-model:page="pageProps.pageNum"
  4. v-model:limit="pageProps.pageSize" @pagination="changePage"/>
  5. </div>
  6. </template>
  7. <script setup>
  8. import {defineExpose} from 'vue';
  9. import {defineEmits} from "vue";
  10. import { onMounted} from 'vue';
  11. const emit = defineEmits(['changePage'])
  12. const props = defineProps({
  13. total: 0,
  14. pageNum: 0,
  15. pageSize: 5,
  16. })
  17. const pageProps = ref({
  18. total: 0,
  19. pageNum: 0,
  20. pageSize: 5,
  21. })
  22. onMounted(() => {
  23. pageProps.value.total = props.total;
  24. pageProps.value.pageNum = props.pageNum;
  25. pageProps.value.pageSize = props.pageSize;
  26. })
  27. function changePage() {
  28. emit('changePage', pageProps)
  29. }
  30. </script>
  31. <style scoped>
  32. </style>