当前位置：首页 > VUE

vue elementui 分页的实现

2026-01-20 14:46:36VUE

Vue + ElementUI 分页实现方法

安装与引入

确保已安装 ElementUI，若未安装可通过以下命令安装：

npm install element-ui -S

在 main.js 中全局引入：

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

基础分页组件

在模板中使用 <el-pagination> 组件：

<template>
  <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>
</template>

数据绑定与方法

在脚本中定义分页相关数据和方法：

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟API请求
      const mockData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));
      this.total = mockData.length;
      this.tableData = mockData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

结合表格使用

分页通常与表格配合使用：

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

自定义分页样式

通过 layout 属性可调整显示内容：

total：总条数
sizes：每页条数选择器
prev：上一页按钮
pager：页码按钮
next：下一页按钮
jumper：页码跳转输入框

远程分页实现

与后端API交互时，通常传递分页参数：

fetchData() {
  axios.get('/api/data', {
    params: {
      page: this.currentPage,
      size: this.pageSize
    }
  }).then(response => {
    this.tableData = response.data.list;
    this.total = response.data.total;
  });
}