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

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

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

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