el-table 分页显示

`el-table` 是 Element UI 提供的一个用于表格展示的组件，在 Vue.js 中非常常见，它支持分页功能。要实现在 `el-table` 中分页显示数据，通常需要以下几个步骤：

1. 首先，引入必要的库：

   <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 使用 `el-pagination` 组件作为分页控件：

   <el-pagination :total="total" :page-size="pageSize" @current-change="handleCurrentChange" />

这里 `total` 是总记录数，`pageSize` 指定每页显示的条数，`@current-change` 是当前页改变时触发的事件。

3. 在 `el-table` 上绑定数据源，并处理分页数据：

   <el-table :data="tableData.slice(startIndex, startIndex + pageSize)">
     <!-- ... 表格列配置 -->
   </el-table>

其中 `tableData` 是总的原始数据数组，`startIndex` 可以通过计算得出，例如 `startIndex = currentPage * pageSize`，`currentPage` 是用户选择的当前页数。

4. 更新数据的逻辑（假设我们有一个 `currentPage` 和 `pageSize` 的状态管理）：

   handleCurrentChange(page) {
     this.startIndex = page * this.pageSize;
     this.updateTableData(); // 调整并渲染分页后的数据
   }
   updateTableData() {
     // 根据分页参数获取需要的数据片段
     this.tableData = yourDataSource.slice(this.startIndex, this.startIndex + this.pageSize);
   }

5. 初始化分页：

   data() {
     return {
       tableData: [], // 初始数据
       currentPage: 1,
       pageSize: 10, // 默认每页显示10条
       total: 0 // 总记录数初始化为0，根据实际数据更新
     };
   },
   created() {
     if (yourDataSource.length > 0) {
       this.total = yourDataSource.length; // 如果有数据，设置总记录数
     } else {
       this.updateTableData();
     }
   }