10.分页

1.el-table:

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

 

2.el-pagination:

<div style="text-align: right;">
    <el-pagination 
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total,prev,pager,next,sizes,jumper"
        :total="tableData.length">
    </el-pagination>
</div>

 

3.data:

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

 

4.methods:

// 页面切换
handleCurrentChange(val){
    this.currentPage = val;
},
// 调整每页显示的条数
handleSizeChange(val) {
    this.pageSize = val;
},

 

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

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