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

<template>
  <elTable 
    :columnWidth="props.columnWidth"
    :columnHeaderAlign="props.columnHeaderAlign"
    :columnAlign="props.columnAlign"
    :tableData="props.tableData"
    :tableColumns="props.tableColumns"
  ></elTable>

  <elPager
    style="margin-top: 15px;float:right"
    :pageParams="props.pageParams"
    @pageSizeChange="pageSizeChange"
    @pageCurrentChange="pageCurrentChange"
  ></elPager>
</template>
  
<script setup>
  defineOptions({ name: 'tablePage' })
  import { reactive, ref, onMounted } from 'vue'
  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
  import elTable from '@/components/elTable/index.vue'
  import elPager from '@/components/elPager/index.vue'
  
  const state = reactive({})

  const props = defineProps({
    // table数据
    tableData: {
      type: Object,
      default: []
    },
    // table表头
    tableColumns: {
      type: Object,
      default: []
    },
    // table分页
    pageParams: {
      type: Object,
      default: {}
    },
    // 表头宽度
    columnWidth:{
      type: Number,
      default: 100
    },
    // 表头对齐
    columnHeaderAlign:{
      type: String,
      default: 'center'
    },
    // 表内容对齐
    columnAlign:{
      type: String,
      default: 'center'
    },
  })

  const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
  
  // size-change
  function pageSizeChange(page){
    emits('pageSizeChange',page)
  }

  // current-change
  function pageCurrentChange(page){
    emits('pageCurrentChange',page)
  }
  
  onMounted(() => {})

  </script>
  
  <style></style>