vue elementui实现分页

使用 Element UI 实现 Vue 分页功能

Element UI 提供了 el-pagination 组件，可以方便地实现分页功能。以下是具体实现步骤：

安装 Element UI 确保项目已安装 Element UI，可以通过以下命令安装：

npm install element-ui

引入 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-pagination：

<template>
  <div>
    <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 {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据请求
      console.log(`当前页码: ${this.currentPage}, 每页条数: ${this.pageSize}`);
    }
  }
};
</script>

结合表格实现分页 通常分页会与表格数据结合使用：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" 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: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 实际项目中这里应该是 API 请求
      const mockData = [];
      for (let i = 0; i < this.pageSize; i++) {
        mockData.push({
          date: `2023-01-${i + 1}`,
          name: `用户${(this.currentPage - 1) * this.pageSize + i + 1}`
        });
      }
      this.tableData = mockData;
      this.total = 100; // 实际项目中从接口获取总条数
    }
  }
};
</script>

自定义分页样式 可以通过 layout 属性自定义分页组件显示的内容：

<el-pagination
  layout="prev, pager, next"
  :total="50">
</el-pagination>

禁用分页 在某些情况下可能需要禁用分页：

<el-pagination
  :disabled="true"
  :total="50">
</el-pagination>

小型分页 对于空间有限的场景，可以使用小型分页：

<el-pagination
  small
  :total="50">
</el-pagination>

通过以上方式，可以灵活地在 Vue 项目中实现各种分页需求。实际项目中，需要将分页与后端 API 结合，根据返回的总数据量和当前页码动态更新分页组件和表格数据。