在前端开发中，实现数据表格的分页显示是提升用户体验和优化数据加载效率的常见需求。Vue 作为一款流行的 JavaScript 框架，搭配功能强大的 Element-UI 组件库，能够轻松达成这一目标。

确保项目中已引入 Vue 和 Element-UI。若使用 Vue CLI 创建项目，安装 Element-UI 后，在 main.js 中引入并全局使用：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

接着，在模板中创建一个基本的数据表格，并添加分页组件。假设从后端获取的数据存储在 tableData 数组中：

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <!-- 更多列 -->
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="totalCount"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

在脚本部分，定义相关的数据和方法：

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalCount: 0
    };
  },
  methods: {
    async fetchData() {
      const response = await this.$http.get('/api/data', {
        params: {
          page: this.currentPage,
          limit: this.pageSize
        }
      });
      this.tableData = response.data.data;
      this.totalCount = response.data.total;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
};

上述代码中，fetchData 方法根据当前页码和每页数量从后端请求数据。handleCurrentChange 方法在页码改变时调用 fetchData 更新表格数据。handleSizeChange 方法在每页显示数量改变时，重置页码并重新获取数据。

通过这种方式，利用 Vue 的响应式原理和 Element-UI 的组件，就能高效实现数据表格的分页显示。它不仅提升了用户浏览大量数据时的体验，还减轻了服务器的压力，优化了整体性能。