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

el-pagination在表格中用法（纯前端分页）

1. el-table

<el-table 
 :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
>
  ...
</el-table>
1
2
3
4
5

2. 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

3. data

data() {
  currentPage: 1,  // 当前页码
  pageSize: 10,  // 每页显示的行数
  tableData: [...],  // 表格数据
}
1
2
3
4
5

4. methods

methods: {
  // 页面切换方法
  handleCurrentChange(val) {
    this.currentPage = val;
  }
}
1
2
3
4
5
6

5. 表格序号问题
   表格中的序号每页都是一样的，所以我们使用自己写的序号方法

<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