...el-pagination
当前位置:   article > 正文

el-pagination分页组件纯前端分页使用方法

el-pagination

el-pagination在表格中用法(纯前端分页)

  1. el-table
<el-table 
 :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
>
  ...
</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5
  1. el-pagination
<div>
  <el-pagination
    background
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    layout="total,prev,pager,next"
    :total="tableData.length" >
  </el-pagination>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  1. data
data() {
  currentPage: 1,  // 当前页码
  pageSize: 10,  // 每页显示的行数
  tableData: [...],  // 表格数据
}
  • 1
  • 2
  • 3
  • 4
  • 5
  1. methods
methods: {
  // 页面切换方法
  handleCurrentChange(val) {
    this.currentPage = val;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 表格序号问题
    表格中的序号每页都是一样的,所以我们使用自己写的序号方法
<el-table-column label="序号" width="50px" align="center">
  <template slot-scope="scope">
    {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
  </template>
</el-table-column>
  • 1
  • 2
  • 3
  • 4
  • 5
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/965209
推荐阅读
相关标签