vue3 + ElementPlus Encapsulated list table component contains paging

<template>
  <div class="table-with-pagination">
    <!-- sheet -->
    <el-table
      :data="tableData"
      border
      stripe
      v-loading="loading"
      style="width: 100%"
    >
      <!-- Dynamic columns -->
      <el-table-column
        v-for="column in columns"
        :key=""
        :prop=""
        :label=""
        :width=""
        :align=" || 'center'"
      >
        <!-- Customize column content -->
        <template #default="scope" v-if="">
          <slot :name="" :row=""></slot>
        </template>
      </el-table-column>
      <!-- Operation column -->
      <el-table-column
        v-if="$"
        label="operate"
        align="center"
        :width="actionsWidth"
      >
        <template #default="scope">
          <slot name="actions" :row=""></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- Pagination -->
    <el-pagination
      class="pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size=""
      :current-page=""
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNo: 1,
      pageSize: 10,
    }),
  },
  actionsWidth: {
    type: String,
    default: '180',
  },
});
const emit = defineEmits(['update:pagination', 'refresh']);
// Change of page sizeconst handleSizeChange = (pageSize) => {
  emit('update:pagination', { ..., pageSize });
  emit('refresh');
};
// Changes to the current pageconst handleCurrentChange = (pageNo) => {
  emit('update:pagination', { ..., pageNo });
  emit('refresh');
};
</script>
<style scoped>
.table-with-pagination {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

<template>
  <div>
    <!-- Search bar -->
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="Task Name">
        <el-input v-model="" placeholder="Please enter the task name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">search</el-button>
      </el-form-item>
    </el-form>
    <!-- Table Components -->
    <TableWithPagination
      :table-data="tableData"
      :columns="columns"
      :total="total"
      :loading="loading"
      :pagination="pagination"
      @update:pagination="handlePaginationChange"
      @refresh="fetchData"
    >
      <!-- Custom columns -->
      <template #status="{ row }">
        <el-tag :type=" === 1 ? 'success' : 'danger'">
          {
  {  === 1 ? 'Enable' : 'Disable' }}
        </el-tag>
      </template>
      <!-- Operation column -->
      <template #actions="{ row }">
        <el-button type="primary" size="small" @click="handleEdit(row)">
          edit
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(row)">
          delete
        </el-button>
      </template>
    </TableWithPagination>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import TableWithPagination from './components/';
import { fetchTaskList } from '@/api/task'; // Suppose there is an API to get the task list// Table column configurationconst columns = [
  { prop: 'taskName', label: 'Task Name' },
  { prop: 'taskType', label: 'Task Type' },
  { prop: 'status', label: 'state', slot: 'status' }, // Use custom columns];
// Table dataconst tableData = ref([]);
const total = ref(0);
const loading = ref(false);
// Query parametersconst queryParams = ref({
  taskName: '',
});
//Pagination parametersconst pagination = ref({
  pageNo: 1,
  pageSize: 10,
});
// Get dataconst fetchData = async () => {
  try {
     = true;
    const res = await fetchTaskList({
      ...,
      ...,
    });
     = ;
     = ;
  } catch (error) {
    ('Failed to get data:', error);
  } finally {
     = false;
  }
};
// Pagination changesconst handlePaginationChange = (newPagination) => {
   = newPagination;
  fetchData();
};
// searchconst handleSearch = () => {
   = 1; // Reset page number  fetchData();
};
// editconst handleEdit = (row) => {
  ('edit:', row);
};
// deleteconst handleDelete = (row) => {
  ('delete:', row);
};
// Initialize load dataonMounted(() => {
  fetchData();
});
</script>