el-table 列分页

在使用 Element UI 的 el-table 组件时，如果需要实现列的分页功能，可以通过自定义分页逻辑来实现。以下是一个简单的示例，展示如何在 el-table 中实现列的分页：

<template>
  <div>
    <el-table :data="pagedData">
      <el-table-column prop="column1" label="Column 1"></el-table-column>
      <el-table-column prop="column2" label="Column 2"></el-table-column>
      <!-- 更多列 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      data: [], // 原始数据
      pagedData: [] // 分页后的数据
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 假设这里获取数据
      this.data = [...Array(100).keys()].map(i => ({ column1: `Row ${i}`, column2: `Data ${i}` }));
      this.total = this.data.length;
      this.updatePagedData();
    },
    updatePagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.pagedData = this.data.slice(start, end);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.updatePagedData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updatePagedData();
    }
  }
};
</script>

在这个示例中，我们使用了 el-pagination 组件来控制分页，并在 el-table 中显示当前页的数据。handleSizeChange 和 handleCurrentChange 方法用于更新当前页面大小和当前页码，并调用 updatePagedData 方法来重新计算分页后的数据。这里的 data 数组代表了原始数据，pagedData 是分页后显示在表格中的数据。