QRAPI/Web/src/components/elPager/index.vue

<template>
  <el-pagination
    :currentPage="state.currentPage"
    :page-size="props.pageParams.pageSize"
    :total="props.pageParams.total"
    :background="props.pageBackGround"
    :layout="props.pageLayout"
    :hide-on-single-page="props.isHideOnlyOne"
    :page-sizes="props.pageSizeList"
    @size-change="pageSizeChange"
    @current-change="pageCurrentChange"
  />
</template>

<script setup>
  defineOptions({ name: 'elPager' })
  import { reactive, ref, onMounted,watch } from 'vue'
  import { ElMessageBox, ElMessage,ElPagination } from 'element-plus'
  
  const state = reactive({
    currentPage:1
  })

  const props = defineProps({
    // table分页
    pageParams: {
      type: Object,
      default: {}
    },
    // 分页显示内容
    pageLayout: {
      type: String,
      default: 'total, sizes,prev, pager, next'
    },
    // 只有一页是否隐藏
    isHideOnlyOne:{
      type:Boolean,
      default: false
    },
    // 是否有底色
    pageBackGround:{
      type:Boolean,
      default: true
    },
    // 页数下拉
    pageSizeList:{
      type: Object,
      default: [10, 20, 50, 100]
    }
  })

  const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])

  watch(props.pageParams, (val) => {
    state.currentPage = val.Page
  })
  
  // size-change
  function pageSizeChange(page){
    state.currentPage = page
    emits('pageSizeChange',page)
  }

  // current-change
  function pageCurrentChange(page){
    state.currentPage = page
    emits('pageCurrentChange',page)
  }

  onMounted(() => {})

</script>
  
<style></style>