elementui vue 实现表格分页

实现表格分页的基本步骤

安装 Element UI 并引入分页组件和表格组件。在 Vue 项目中，通过 el-table 和 el-pagination 组件实现分页功能。

import { ElTable, ElPagination } from 'element-ui';
Vue.use(ElTable);
Vue.use(ElPagination);

数据绑定与分页逻辑

定义表格数据和分页相关参数。通过 current-page 和 page-size 控制当前页码和每页显示条数。

data() {
  return {
    tableData: [], // 表格数据
    currentPage: 1, // 当前页码
    pageSize: 10,   // 每页显示条数
    total: 0        // 总数据量
  };
}

分页请求数据

在 mounted 钩子中调用数据获取方法，并在方法中处理分页逻辑。通常需要根据当前页码和每页条数从后端获取数据。

methods: {
  fetchData() {
    const params = {
      page: this.currentPage,
      size: this.pageSize
    };
    // 模拟 API 请求
    getTableData(params).then(res => {
      this.tableData = res.data.list;
      this.total = res.data.total;
    });
  }
},
mounted() {
  this.fetchData();
}

分页事件处理

监听分页组件的 current-change 和 size-change 事件，在页码或每页条数变化时重新获取数据。

handleCurrentChange(val) {
  this.currentPage = val;
  this.fetchData();
},
handleSizeChange(val) {
  this.pageSize = val;
  this.fetchData();
}

完整模板示例

将分页组件和表格组件结合，绑定事件和数据。

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

后端接口模拟

如果后端接口尚未准备好，可以使用模拟数据测试分页功能。

function getTableData(params) {
  const mockData = [];
  for (let i = 1; i <= 100; i++) {
    mockData.push({
      date: `2023-01-${i < 10 ? '0' + i : i}`,
      name: `用户${i}`
    });
  }
  const { page, size } = params;
  const start = (page - 1) * size;
  const end = start + size;
  return Promise.resolve({
    data: {
      list: mockData.slice(start, end),
      total: mockData.length
    }
  });
}

样式调整

根据需要调整分页组件的样式，例如居中显示或固定位置。

.el-pagination {
  margin-top: 20px;
  text-align: center;
}

通过以上步骤，可以快速实现 Element UI 表格的分页功能。实际项目中，需根据后端接口和数据格式调整请求参数和数据处理逻辑。