Building a Reusable Vue Table Component with Pagination and Loading

The article introduces a reusable Vue component PageTable that encapsulates Element UI's el-table and el-pagination .

The component receives a fetchData function prop from the parent, which returns a promise with data and total count.

The template binds table data to tableData and uses slots for custom columns:

<template>
<div>
<el-table :data="tableData">
<slot />
</el-table>
<el-pagination
:layout="total, sizes, prev, pager, next, jumper"
::current-page.sync="page.current"
::page-size.sync="page.size"
::total="page.total"
:@size-change="search"
:@current-change="getTableData"
/>
</div>
</template>

The script defines props, data, and methods: getTableData calls fetchData , updates loading state via $emit('update:loading') , and handles errors.

async getTableData() {
try {
const { current, size } = this.page;
this.$emit('update:loading', true);
const { data, total } = await this.fetchData(current, size);
this.tableData = data;
this.page.total = total;
} catch (err) {
this.tableData = [];
this.page.total = 0;
} finally {
this.$emit('update:loading', false);
}
}

Additional features include exposing the table's ref via getTableRef and passing through attributes and listeners with v-bind="$attrs" and v-on="$listeners" .