el-table-column表格中使用el-pagination进行分页

el-table-column表格中使用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