el-table 前端分页

在前端实现el-table的分页，可以通过以下步骤来完成：

1. 在Vue组件中引入el-pagination组件，用于展示分页器。

   <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage"
     :page-sizes="[10, 20, 30, 50]"
     :page-size="pageSize"
     :total="total">
   </el-pagination>

在上面的代码中，`@size-change`和`@current-change`分别是分页器的事件，`currentPage`表示当前页码，`pageSize`表示每页显示的数据条数，`total`表示总数据条数。

2. 在data中定义表格数据和分页相关的数据。

   data() {
     return {
       tableData: [],
       currentPage: 1,
       pageSize: 10,
       total: 0
     };
   },

3. 在mounted生命周期钩子函数中，请求第一页的数据并更新表格数据和分页相关的数据。

   mounted() {
     this.getData();
   },
   methods: {
     getData() {
       // 发送请求获取数据
       // ...
       // 更新表格数据和分页相关的数据
       this.tableData = res.data.list;
       this.total = res.data.total;
     },
     handleSizeChange(val) {
       this.pageSize = val;
       this.getData();
     },
     handleCurrentChange(val) {
       this.currentPage = val;
       this.getData();
     }
   }

4. 在el-table中绑定表格数据。

   <el-table :data="tableData">
     <!-- 表格列 -->
   </el-table>

通过以上步骤，就可以在前端实现el-table的分页了。注意，在实际项目中，还需要根据后端接口的返回数据进行相应的处理。