vue elementui实现分页

Vue + ElementUI 分页实现方法

安装与引入

确保已安装 ElementUI，可通过 npm 或 yarn 安装：

npm install element-ui

在 main.js 中全局引入：

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

Vue.use(ElementUI);

基础分页组件

使用 <el-pagination> 组件实现分页：

<template>
  <div>
    <el-table :data="currentPageData" border>
      <!-- 表格列定义 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :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>

数据与逻辑处理

在 Vue 实例中定义分页相关数据和方法：

<script>
export default {
  data() {
    return {
      tableData: [],       // 原始数据
      currentPage: 1,      // 当前页码
      pageSize: 10,        // 每页条数
      total: 0,            // 总数据量
      currentPageData: []  // 当前页数据
    };
  },
  methods: {
    // 获取分页数据（模拟API请求）
    fetchData() {
      // 模拟异步请求
      setTimeout(() => {
        this.tableData = Array.from({length: 100}, (_, i) => ({
          name: `用户${i+1}`,
          age: Math.floor(Math.random() * 30) + 20
        }));
        this.total = this.tableData.length;
        this.updatePageData();
      }, 500);
    },

    // 更新当前页数据
    updatePageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.tableData.slice(start, end);
    },

    // 每页条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.updatePageData();
    },

    // 页码变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updatePageData();
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

后端分页对接

实际项目中通常需要对接后端分页接口：

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

样式自定义

可通过 CSS 调整分页组件样式：

<style scoped>
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

功能扩展

实现带搜索的分页：

<el-input v-model="searchQuery" placeholder="搜索..." @change="handleSearch"></el-input>

methods: {
  handleSearch() {
    this.currentPage = 1;
    this.fetchData();
  }
}