分页组件 (Pagination)

Element-UI 的 Pagination 组件用于在数据量较大的情况下，对数据进行分页展示，提供了丰富的配置项和事件来满足不同场景的需求。

提示

Pagination 组件官方文档：https://element.eleme.cn/#/zh-CN/component/pagination (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-pagination> 标签来创建分页组件，需要设置 total 属性来指定总条目数。

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

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页数
      pageSize: 10    // 每页显示条目数
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

• current-page: 绑定当前页数，使用 .sync 修饰符使页码与数据同步更新。
• page-size: 设置每页显示的条目数。
• total: 设置总条目数，决定分页的页数。
• layout: 通过设置不同的子组件来布局分页器，如 prev, pager, next。
• 

Pagination 属性

参数	说明	类型	可选值	默认值
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个即可显示页码	number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	string	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	false

Pagination 事件

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮后触发	当前页
next-click	用户点击下一页按钮后触发	当前页

Pagination 插槽

名称	说明
—	自定义内容，需要在 layout 中列出 slot

2. 常见的 layout 子组件

在 Element UI 的 Pagination 分页组件中，layout 属性用于定义分页组件中各部分的布局和显示内容。layout 属性是一个字符串，由逗号分隔的子组件名组成，子组件名用来指定分页组件的各部分，如页码、跳转按钮、总条目数等。

以下是 layout 属性中可以使用的子组件：

• sizes：用于控制每页显示的条目数量的选择器（会显示一个下拉框）。
• prev：上一页按钮。
• pager：页码按钮区域。
• next：下一页按钮。
• jumper：页码跳转输入框，允许用户输入页码并跳转到该页。
• total：总条目数。
• slot：用于自定义内容，需要在 layout 中列出 slot，然后在组件的默认插槽中定义内容。
• ->：这是一个分隔符，用于将之前的组件对齐到左边，将之后的组件对齐到右边。使用 -> 后，前面的组件将靠左显示，后面的组件将靠右显示。

假设你使用如下的 layout 配置：

<el-pagination
  :current-page.sync="currentPage"
  :page-size.sync="pageSize"
  :total="total"
  layout="sizes, prev, pager, next, jumper, ->, total">
</el-pagination>

这个 layout 配置将生成以下内容：

3. 分页组件常用示例

带有每页显示条数选择器的分页组件

关键点：通过 layout 属性配置 sizes 子组件，并结合 page-sizes 属性提供每页条数的选项。

<template>
  <el-pagination
    :page-sizes="[10, 20, 30, 50]"
    :page-size="pageSize"
    :total="1000"
    layout="sizes, prev, pager, next, jumper, ->, total"
    :current-page.sync="currentPage"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

• 每页显示条数选择：使用 sizes 子组件结合 page-sizes 属性，允许用户动态调整每页显示的条数。
• 页码跳转：通过 jumper 子组件，用户可以直接输入页码跳转。
• 

小型分页组件

关键点：通过 small 属性启用小型分页样式，适合在紧凑布局中使用。

<template>
  <el-pagination
    small
    :current-page.sync="currentPage"
    :page-size="10"
    :total="500"
    layout="prev, pager, next">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  }
};
</script>

• 小型样式：适用于显示空间有限的场景，通过 small 属性启用。
• 

带有文本提示的分页组件

关键点：通过 prev-text 和 next-text 属性替代默认的分页图标，显示文本提示。

<template>
  <el-pagination
    :current-page.sync="currentPage"
    :page-size="10"
    :total="1000"
    prev-text="上一页"
    next-text="下一页"
    layout="prev, pager, next">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  }
};
</script>

• 文本提示：使用 prev-text 和 next-text 属性替代图标，提供更明确的导航提示。
• 

4. 使用场景及实战示例

Pagination 分页组件常见的使用场景包括：

• 数据表格：在数据量较大时，结合 Table 组件使用，用户可以通过分页快速查看数据。
• 数据列表：在新闻、博客等内容管理系统中，分页展示文章列表，提升用户体验。
• 搜索结果：在搜索页面中，分页展示搜索结果，避免一次性加载过多数据。

数据表格结合分页 (含编辑删除)

<template>
  <div>
    <!-- 表格组件 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      background
      layout="total, prev, pager, next, jumper, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑信息" :visible.sync="editDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input type="number" v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [], // 存储表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条目个数
      total: 0, // 总条目数
      editDialogVisible: false, // 控制编辑对话框显示
      editForm: { // 编辑表单数据
        id: '',
        name: '',
        age: '',
        address: ''
      }
    };
  },
  methods: {
    // 初始化加载数据
    loadData() {
      const params = {
        page: this.currentPage,
        size: this.pageSize
      };

      // 使用 axios 发送 GET 请求，查询数据
      axios.get('/api/data', { params })
        .then(response => {
          this.tableData = response.data.items; // 将返回的数据赋值给表格
          this.total = response.data.total; // 设置总条目数
        })
        .catch(error => {
          console.error('加载数据失败:', error);
        });
    },
    // 处理每页显示条数改变
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.loadData(); // 重新加载数据
    },
    // 处理当前页码改变
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.loadData(); // 重新加载数据
    },
    // 处理编辑操作
    handleEdit(row) {
      // 将当前行的数据赋值给编辑表单
      this.editForm = { ...row };
      this.editDialogVisible = true; // 打开编辑对话框
    },
    // 保存编辑后的数据
    saveEdit() {
      axios.put(`/api/data/${this.editForm.id}`, this.editForm)
        .then(() => {
          this.$message.success('编辑成功');
          this.editDialogVisible = false; // 关闭对话框
          this.loadData(); // 重新加载数据
        })
        .catch(error => {
          console.error('保存编辑失败:', error);
          this.$message.error('编辑失败');
        });
    },
    // 处理删除操作
    handleDelete(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/api/data/${id}`)
          .then(() => {
            this.$message.success('删除成功');
            this.loadData(); // 重新加载数据
          })
          .catch(error => {
            console.error('删除失败:', error);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  },
  created() {
    this.loadData(); // 组件创建时加载数据
  }
};
</script>

<style scoped>
/* 根据需求添加样式 */
</style>

• 数据表格分页：将 Table 组件与 Pagination 组件结合，通过分页控制展示的表格数据。
• 用户体验优化：分页可以有效降低页面加载时间，提升用户操作流畅度。
• 

测试数据Mock.js

在 Vue 组件中引入这些测试数据进行使用：import testData from './mockData.js';

// 手动创建测试数据
const testData = [
  { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 30, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 28, address: '广州市天河区' },
  { id: 4, name: '赵六', age: 35, address: '深圳市福田区' },
  { id: 5, name: '钱七', age: 32, address: '杭州市西湖区' },
  { id: 6, name: '孙八', age: 29, address: '南京市鼓楼区' },
  { id: 7, name: '周九', age: 40, address: '武汉市武昌区' },
  { id: 8, name: '吴十', age: 36, address: '成都市青羊区' },
  { id: 9, name: '郑十一', age: 27, address: '重庆市渝中区' },
  { id: 10, name: '王十二', age: 33, address: '天津市和平区' }
];

export default testData;

参数详细说明

数据初始化：

• tableData：存储表格显示的数据。
• currentPage：当前页码，默认为 1。
• pageSize：每页显示的条目个数，默认为 10。
• total：总条目数，用于计算分页。
• editDialogVisible：控制编辑对话框的显示与隐藏。
• editForm：用于存储当前编辑的表单数据。

loadData (加载)方法：

• 发送 GET 请求，根据 currentPage 和 pageSize 获取当前页的数据。
• 返回的数据包括 items（当前页的数据）和 total（总条目数）。
• 请求成功后，将数据赋值给 tableData，并更新 total。

handleSizeChange (每页显示条目)方法：

• 当用户改变每页显示的条目数时触发。更新 pageSize 后重新加载数据。

handleCurrentChange (页码改变)方法：

• 当用户改变当前页码时触发。更新 currentPage 后重新加载数据。

handleEdit (编辑)方法：

• 当用户点击编辑按钮时触发。将当前行的数据赋值给 editForm，并显示编辑对话框。

saveEdit (保存)方法：

• 发送 PUT 请求，将编辑后的数据保存到后端。
• 成功保存后，关闭编辑对话框并重新加载数据。
• 如果保存失败，弹出错误提示。

handleDelete (删除)方法：

• 当用户点击删除按钮时触发。首先弹出确认对话框，如果用户确认删除，发送 DELETE 请求。
• 成功删除后，重新加载数据。如果删除失败，弹出错误提示。

分页组件的使用：

• :current-page.sync 和 :page-size.sync 使用 .sync 修饰符，确保在 currentPage 和 pageSize 改变时同步更新视图。
• layout 定义了分页组件的布局，显示了总条目数、页码按钮、每页条数选择器、上一页、下一页等元素。