关于elementUI 分页组件使用总结

Element UI 是一套基于 Vue.js 的 PC 端组件库,提供了丰富的组件来构建页面。其中分页组件 el-pagination 用于将一段内容分为若干页,并提供页面跳转功能。el-pagination 的主要属性如下:- total:总条目数,必填。

• page-size:每页显示条目个数,默认 10。
• current-page:当前页数,默认 1。
• layout:组件布局,设定显示哪些分页元素。
• page-sizes:每页显示个数选择器的选项设置。
• background:页码按钮的背景色。
• prev-text/next-text:上一页/下一页文字内容。示例代码:

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

<el-pagination
  :page-size="20"
  :pager-count="7"  
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

<el-pagination
  :current-page="3"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="20"  
  layout="sizes, prev, pager, next"
  :total="1000">
</el-pagination>

响应点击页码或者上一页/下一页按钮,会触发current-change事件,并传入最新的页码currentPage,我们可以在事件回调中获取最新页码并加载对应数据:

html
<el-pagination 
  layout="prev, pager, next"
  @current-change="handleCurrentChange" 
  :total="1000">
</el-pagination>
methods: {
  handleCurrentChange(currentPage) {
    this.page = currentPage
    this.loadData()  //加载对应页码数据
  }
}

size-change 事件，当用户选择不同的每页条目数时,会触发此事件,并传入最新的 pageSize。我们可以在 size-change 事件的回调函数中获取最新选中的 pageSize,并重新发起数据请求加载对应数量的数据:

html
<el-pagination
  :page-sizes="[10, 20, 30, 40]"
  :page-size="20"
  layout="sizes, prev, pager, next"
  @size-change="handleSizeChange"
  :total="1000">
</el-pagination>

methods: {
  handleSizeChange(size) {
    console.log(size)  // 最新选择的每页条目数
    this.loadData(size)  // 重新加载对应数量数据
  }
}

当用户在每页条目数选择框中选择不同页大小时,会触发 size-change 事件,传入最新选择的 pageSize。我们在事件回调中获取最新 pageSize,并重新发起查询请求加载对应数量的列表数据。举个例子,用户一开始选择每页 20 条,加载了第 1 页数据。当用户改为选择每页 30 条时,触发 size-change 事件,此时我们需要:1. 获取事件回调中的最新 pageSize:30
2. 重新计算总页数,如 1000 条总数据,每页 30 条,总页数为 1000/30 = 33 页
3. 重置当前页为 1
4. 重新发起数据请求,加载第 1 页,每页 30 条的数据这样当每页条目数改变后,可以重新获取对应数量的数据展示,而不会产生数据错乱的情况。所以在使用 el-pagination 组件时,如果设置了可变的每页条目数选择,那么手动监听 size-change 事件并在回调中重新获取数据是必要的,这可以确保每页数据量变化后数据正常更新和展示。