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

1、el-table

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

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>

 

3、data

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

4、methods:

methods: {
  // 页面切换方法
  handleCurrentChange(val) {
    this.currentPage = val;
  }
}

5、表格序号

<el-table-column label="序号" width="50px" align="center">
  <template slot-scope="scope">
    {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
  </template>
</el-table-column>