vue多列表前端分页

场景

如果每个对象里的 tableData 是一个列表，并且你想要为每个这样的列表实现独立的分页功能，你需要为每个对象维护一个独立的分页状态。这通常意味着你需要在你的 Vue 组件的 data 函数中为每个对象或每个分页状态创建一个独立的变量，但这在实际操作中可能不太方便。

一个更实用的方法是使用一个数组或对象来存储每个 dataList 对象的分页状态。以下是一个示例，展示了如何为每个 dataList 对象的 tableData 实现独立的分页：

<template>  
  <div v-for="(item, index) in dataListWithPagination" :key="index">  
    <el-table :data="item.paginatedData" style="width: 100%">  
      <!-- 你的表格列 -->  
      <el-table-column prop="name" label="Name"></el-table-column>  
      <el-table-column prop="idCard" label="ID Card"></el-table-column>  
      <!-- 其他列... -->  
    </el-table>  
    <el-pagination  
      @size-change="handleSizeChange(index, $event)"  
      @current-change="handleCurrentChange(index, $event)"  
      :current-page="item.currentPage"  
      :page-sizes="[5, 10, 20]"  
      :page-size="item.pageSize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="item.total">  
    </el-pagination>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      dataList: [  
        // 你的数据...  
      ],  
      // 初始化分页状态  
      dataListWithPagination: []  
    };  
  },  
  created() {  
    this.initializePagination();  
  },  
  methods: {  
    initializePagination() {  
      this.dataListWithPagination = this.dataList.map(item => ({  
        ...item,  
        currentPage: 1,  
        pageSize: 5,  
        total: item.tableData.length,  
        paginatedData: item.tableData.slice(0, this.pageSize)  
      }));  
    },  
    handleSizeChange(index, newSize) {  
      this.$set(this.dataListWithPagination, index, {  
        ...this.dataListWithPagination[index],  
        pageSize: newSize,  
        currentPage: 1, // 重置为第一页  
        paginatedData: this.dataList[index].tableData.slice(0, newSize)  
      });  
      this.updatePaginatedData(index);  
    },  
    handleCurrentChange(index, newPage) {  
      this.$set(this.dataListWithPagination, index, {  
        ...this.dataListWithPagination[index],  
        currentPage: newPage,  
        paginatedData: this.dataList[index].tableData.slice((newPage - 1) * this.dataListWithPagination[index].pageSize, newPage * this.dataListWithPagination[index].pageSize)  
      });  
    },  
    updatePaginatedData(index) {  
      // 如果需要基于新的pageSize和currentPage更新paginatedData，可以在这里实现  
      // 但由于handleCurrentChange已经处理了这一点，所以这里可能不需要额外的代码  
    }  
  }  
};  
</script>

注意：上面的代码有几个需要注意的地方：

initializePagination 方法在组件创建时（created 钩子）被调用，用于初始化每个对象的分页状态。
handleSizeChange 和 handleCurrentChange 方法用于处理分页大小和当前页的变化。注意，这些方法使用 Vue 的 $set 方法来确保 Vue 能够检测到数组内部对象的属性变化。
在 handleSizeChange 方法中，当分页大小改变时，我重置了当前页为第一页，但你可以根据需求调整这个行为。

paginatedData 是根据当前的 currentPage 和 pageSize 从原始的 tableData 中切片得到的。
此外，请注意，我在 handleSizeChange 方法中对 paginatedData 的更新可能不是完全正确的，因为它没有考虑到新的 pageSize 可能小于当前页已经显示的数据量。在实际应用中，你可能需要更精细地控制这个逻辑。然而，在大多数情况下，分页大小的变化会伴随着当前页的重置，所以这可能不是问题。如果需要更复杂的逻辑，你可以在 updatePaginatedData 方法中进一步处理。