当前位置：首页 > VUE

vue实现的表格分页

2026-02-25 00:52:43VUE

实现表格分页的方法

在Vue中实现表格分页功能，可以通过以下步骤完成。这里以Element UI为例，展示如何实现一个带有分页功能的表格。

安装Element UI

确保项目中已经安装Element UI库。如果没有安装，可以通过以下命令进行安装：

npm install element-ui

在main.js中引入Element UI：

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

Vue.use(ElementUI);

创建表格和分页组件

在Vue组件中，使用el-table和el-pagination组件实现表格和分页功能。以下是一个完整的示例代码：

<template>
  <div>
    <el-table :data="currentPageData" border style="width: 100%">
      <el-table-column prop="id" label="ID" 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="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', address: '北京市海淀区' },
        { id: 2, name: '李四', address: '上海市浦东新区' },
        // 更多数据...
      ],
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

分页逻辑说明

数据分页：通过computed属性currentPageData计算当前页显示的数据。根据currentPage和pageSize计算出数据的起始和结束位置，使用slice方法截取对应数据。
分页事件：el-pagination组件提供了@size-change和@current-change事件，分别用于处理每页显示条数变化和当前页码变化。在事件处理函数中更新pageSize和currentPage的值。
分页配置：el-pagination的layout属性用于配置分页组件的布局，常见的选项包括total（总条数）、sizes（每页条数选择器）、prev（上一页）、pager（页码）、next（下一页）、jumper（页码输入框）。

后端分页实现

如果数据量较大，通常需要后端分页。以下是后端分页的实现示例：

vue实现的表格分页

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" 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
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟API请求
      const params = {
        page: this.currentPage,
        size: this.pageSize
      };
      // 实际项目中替换为真实的API调用
      axios.get('/api/data', { params }).then(response => {
        this.tableData = response.data.list;
        this.total = response.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
};
</script>

关键点说明

后端分页：通过API传递page和size参数，后端返回对应页的数据和总条数。每次分页参数变化时，重新调用fetchData方法获取数据。
分页事件：handleSizeChange和handleCurrentChange方法中更新分页参数后，调用fetchData重新加载数据。
总条数：total属性需要从后端返回，用于分页组件显示总条数。