elementui分页

使用 ElementUI 分页组件

ElementUI 提供了 el-pagination 组件，用于实现分页功能。以下是基本用法和常见配置。

基本用法

在模板中添加 el-pagination 组件：

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  @current-change="handleCurrentChange"
  layout="prev, pager, next">
</el-pagination>

在脚本中定义数据和事件处理：

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 根据 currentPage 和 pageSize 获取数据
    }
  }
}

分页布局配置

通过 layout 属性可以自定义分页布局，支持以下选项：

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

示例：

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  @current-change="handleCurrentChange"
  @size-change="handleSizeChange"
  layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

分页事件处理

• current-change：当前页改变时触发
• size-change：每页条数改变时触发
• prev-click：点击上一页按钮时触发
• next-click：点击下一页按钮时触发

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

远程分页

通常需要结合后端接口实现远程分页：

fetchData() {
  api.getList({
    page: this.currentPage,
    size: this.pageSize
  }).then(res => {
    this.data = res.data;
    this.total = res.total;
  });
}

样式自定义

可以通过 CSS 覆盖默认样式：

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

完整示例

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格内容 -->
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      api.getList({
        page: this.currentPage,
        size: this.pageSize
      }).then(res => {
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    }
  }
}
</script>