当前位置：首页 > VUE

elementui vue 实现表格分页

2026-02-22 20:41:08VUE

使用 ElementUI 和 Vue 实现表格分页

ElementUI 提供了 el-table 和 el-pagination 组件，可以方便地实现表格分页功能。以下是实现步骤：

安装 ElementUI

确保项目中已安装 ElementUI。如果未安装，可以通过以下命令安装：

npm install element-ui -S

引入 ElementUI

在项目的入口文件（如 main.js）中引入 ElementUI：

elementui vue 实现表格分页

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

Vue.use(ElementUI);

实现表格分页

以下是一个完整的示例代码，展示如何结合 el-table 和 el-pagination 实现分页功能。

模板部分

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      tableData: [], // 当前页显示的数据
      currentPage: 1, // 当前页码
      pageSize: 10,   // 每页显示条数
      total: 0,       // 总数据量
      allData: []     // 模拟所有数据
    };
  },
  created() {
    // 模拟获取所有数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从后端获取数据
      this.allData = Array.from({ length: 100 }, (_, i) => ({
        date: `2023-01-${i + 1}`,
        name: `用户${i + 1}`,
        address: `地址${i + 1}`
      }));
      this.total = this.allData.length;
      this.updateTableData();
    },
    updateTableData() {
      // 根据当前页码和每页条数截取数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.allData.slice(start, end);
    },
    handleSizeChange(val) {
      // 每页条数变化时触发
      this.pageSize = val;
      this.updateTableData();
    },
    handleCurrentChange(val) {
      // 当前页码变化时触发
      this.currentPage = val;
      this.updateTableData();
    }
  }
};
</script>

关键点说明

数据分页逻辑
updateTableData 方法根据 currentPage 和 pageSize 计算当前页显示的数据范围，通过 slice 方法截取数据。
分页组件事件
- @size-change：每页条数变化时触发，更新 pageSize 并重新加载数据。
- @current-change：当前页码变化时触发，更新 currentPage 并重新加载数据。
后端分页
如果是后端分页，只需在 handleSizeChange 和 handleCurrentChange 中调用接口获取对应页码的数据即可。

后端分页示例

若需从后端分页，可以将 fetchData 方法改为异步请求：

async fetchData() {
  const res = await axios.get('/api/data', {
    params: {
      page: this.currentPage,
      size: this.pageSize
    }
  });
  this.tableData = res.data.list;
  this.total = res.data.total;
}

通过以上步骤，可以轻松实现 ElementUI 表格的分页功能。