xjc_pagination.vue 963 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  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. console.log("mmmmmmmxxx",props.total)
  24. pageProps.value.total = props.total;
  25. pageProps.value.pageNum = props.pageNum;
  26. pageProps.value.pageSize = props.pageSize;
  27. })
  28. function changePage() {
  29. emit('changePage', pageProps)
  30. }
  31. </script>
  32. <style scoped>
  33. </style>