element分页组件的使用说明

我来详细解释这个Element UI分页组件的每个属性和事件：

1. 基础结构

<el-pagination 
    layout="sizes, prev, pager, next" 
    :current-page="pageNum" 
    :total="total"
    :page-sizes="[2, 3, 5, 10]" 
    :page-size="pageSize" 
    @size-change="handleSizeChange"
    @current-change="findAll" 
    @prev-click="findAll" 
    @next-click="findAll">
</el-pagination>

2. 属性详解

layout - 布局控制

layout="sizes, prev, pager, next"

控制分页组件显示哪些元素，用逗号分隔：

元素	说明	显示效果
sizes	每页条数选择器	下拉框：10条/页 ▼
prev	上一页按钮	◀
pager	页码列表	1 2 3 4 5 ...
next	下一页按钮	▶
total	总条数	共 100 条
jumper	快速跳转	前往 5 页

其他常用布局：

<!-- 显示所有元素 -->
layout="total, sizes, prev, pager, next, jumper"

<!-- 简洁版 -->
layout="prev, pager, next"

<!-- 带总数和跳转 -->
layout="total, prev, pager, next, jumper"

:current-page - 当前页码

:current-page="pageNum"

• 绑定当前页码，双向绑定
• pageNum 是Vue data中的变量
• 冒号(:)是 v-bind: 的简写

:total - 总记录数

:total="total"

• 总记录数，用于计算总页数
• 从后端获取的总记录数

:page-sizes - 每页条数选项

:page-sizes="[2, 3, 5, 10]"

• 下拉选择器的可选值
• 用户可以选择每页显示2、3、5、10条

:page-size - 当前每页条数

:page-size="pageSize"

• 当前每页显示的条数
• 默认值通常是第一个选项

3. 事件详解

@size-change - 每页条数变化

@size-change="handleSizeChange"

触发时机： 用户改变每页显示条数时

methods: {
    handleSizeChange(val) {
        // val 是用户选择的新每页条数
        this.pageSize = val;  // 更新每页大小
        this.pageNum = 1;     // 重置到第一页
        this.findAll();       // 重新查询
    }
}

@current-change - 当前页变化

@current-change="findAll"

触发时机：

• 用户点击页码时
• 用户点击上一页/下一页时（如果没有单独的@prev-click/@next-click）

methods: {
    findAll(val) {
        // val 是新的页码（当前点击的页码）
        // 如果不需要页码参数，可以省略
        this.fetchData(this.pageNum, this.pageSize);
    }
}

@prev-click - 点击上一页

@prev-click="findAll"

触发时机： 点击"上一页"按钮

@next-click - 点击下一页

@next-click="findAll"

触发时机： 点击"下一页"按钮

4. 完整的Vue组件示例

<template>
  <div>
    <!-- 数据表格 -->
    <el-table :data="tableData" border stripe>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="dynasty" label="朝代"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination 
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="pageNum" 
      :total="total"
      :page-sizes="[2, 3, 5, 10]" 
      :page-size="pageSize" 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],      // 表格数据
      pageNum: 1,         // 当前页码
      pageSize: 3,        // 每页条数
      total: 0            // 总记录数
    }
  },
  created() {
    this.findAll();       // 初始化加载数据
  },
  methods: {
    // 查询数据
    findAll() {
      // 调用后端接口
      axios.get(`/poet/${this.pageNum}/${this.pageSize}`)
        .then(res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
        })
        .catch(err => {
          console.error('查询失败', err);
        });
    },
    
    // 每页条数变化
    handleSizeChange(val) {
      this.pageSize = val;    // 更新每页大小
      this.pageNum = 1;       // 重置到第一页
      this.findAll();         // 重新查询
    },
    
    // 当前页变化
    handleCurrentChange(val) {
      this.pageNum = val;     // 更新当前页码
      this.findAll();         // 重新查询
    }
  }
}
</script>

5. 三种事件绑定方式的对比

方式一：只使用 @current-change

<el-pagination 
  @current-change="findAll"
  @size-change="handleSizeChange">
</el-pagination>

• @current-change 处理所有页码变化（点击页码、上下页）
• 推荐这种方式，代码简洁

方式二：分别绑定事件

<el-pagination 
  @current-change="findAll"
  @prev-click="findAll" 
  @next-click="findAll">
</el-pagination>

• 分别处理不同点击事件
• 可以做不同的业务逻辑

方式三：使用统一方法

<el-pagination 
  @current-change="handlePageChange"
  @size-change="handlePageChange">
</el-pagination>

<script>
methods: {
  handlePageChange() {
    // 统一处理分页变化
    this.findAll();
  }
}
</script>

6. 常见问题和注意事项

问题1：点击分页后数据不刷新

原因： 事件绑定错误或方法未调用查询

// 错误示例
handleCurrentChange(val) {
  this.pageNum = val;
  // 忘记调用查询方法
}

// 正确示例
handleCurrentChange(val) {
  this.pageNum = val;
  this.findAll(); // 必须调用查询方法
}

问题2：每页条数变化后页码未重置

handleSizeChange(val) {
  this.pageSize = val;
  this.pageNum = 1;  // 必须重置到第一页
  this.findAll();
}

问题3：total值未更新

// 查询成功后必须更新total
findAll() {
  axios.get('/api/data').then(res => {
    this.tableData = res.data.rows;
    this.total = res.data.total;  // 必须赋值
  });
}

7. 高级用法：带搜索的分页

<template>
  <div>
    <!-- 搜索条件 -->
    <el-input v-model="searchKey" placeholder="输入作者名称" style="width:200px;">
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>

    <!-- 分页组件 -->
    <el-pagination 
      layout="total, sizes, prev, pager, next"
      :current-page="pageNum"
      :total="total"
      :page-sizes="[2, 3, 5, 10]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="findAll">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      pageNum: 1,
      pageSize: 3,
      total: 0,
      tableData: []
    }
  },
  methods: {
    // 搜索
    search() {
      this.pageNum = 1;    // 搜索后重置到第一页
      this.findAll();
    },
    
    // 查询数据
    findAll() {
      axios.get('/api/search', {
        params: {
          page: this.pageNum,
          pageSize: this.pageSize,
          keyword: this.searchKey
        }
      }).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.findAll();
    }
  }
}
</script>

8. 参数传递说明

// 当事件触发时，会自动传递参数
@size-change="handleSizeChange"  
// handleSizeChange(val) 接收新每页条数

@current-change="handleCurrentChange"
// handleCurrentChange(val) 接收新页码

@prev-click="findAll"
// findAll() 没有参数，或者可以接收事件对象

@next-click="findAll"
// findAll() 没有参数

总结

这个分页组件的核心工作流程：

1. 用户操作 → 点击页码/改变每页条数
2. 触发事件 → 调用对应的方法
3. 更新参数 → 修改 pageNum 或 pageSize
4. 重新查询 → 调用后端接口获取新数据
5. 更新视图 → 表格数据刷新，分页状态更新

通过这个组件，学生可以理解：

• 前端分页组件的使用方法
• 事件驱动的编程思想
• 前后端数据交互的流程
• Vue的数据驱动视图理念