Vue3 -- 设置分页，切换分页之后选项仍能保留 控制多个表格的选中不会互相影响

在 Vue 3 中实现分页功能，并确保在切换分页时选中的选项能够保留，同时控制多个表格之间的选中状态不互相影响，可以按照以下步骤进行：

1. 数据结构设计

为每个表格维护独立的选中项和分页状态。可以使用一个对象来存储每个表格的选中项和分页信息：

data() {return {appDeployForm: {detail: [{ hostForm: [], selectedHosts: [], currentPage: 1, pageSize: 10, total: 0 }, // 第一个表格{ hostForm: [], selectedHosts: [], currentPage: 1, pageSize: 10, total: 0 }  // 第二个表格]}};
}

2. 表格渲染

使用 v-for 渲染多个表格，并在每个表格中使用 el-table 组件。确保每个表格都能独立管理自己的选中项和分页状态：

<el-row v-for="(item, index) in appDeployForm.detail" :key="index"><el-col :span="24"><el-form-item :label="$t('labels.host')"><el-table:data="item.hostForm"borderstyle="width:90%"highlight-current-row@selection-change="handleSelectionChange(item, $event)"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" :label="$t('columns.hostName')" align="left" min-width="5"></el-table-column><el-table-column prop="operation" :label="$t('columns.operation')" align="center" min-width="5"><template #default="scope"><a style="color:#1890ff;cursor:pointer" @click="deleteHost(scope.$index, scope.row, index)">删除</a></template></el-table-column></el-table></el-form-item><el-pagination@current-change="handlePageChange(item, $event)":current-page="item.currentPage":page-size="item.pageSize":total="item.total"></el-pagination></el-col>
</el-row>

3. 处理选中项

在表格的 @selection-change 事件中，更新对应表格的选中项：

methods: {handleSelectionChange(item, selectedRows) {item.selectedHosts = selectedRows;},deleteHost(index, row, tableIndex) {// 删除逻辑},handlePageChange(item, newPage) {item.currentPage = newPage;// 这里可以添加逻辑来更新表格数据，例如重新请求数据}
}

4. 保持选中项

在切换分页时，确保选中项能够保留。由于每个表格的选中项是独立的，切换分页不会影响其他表格的选中状态。

5. 示例代码

以下是完整的示例代码，展示了如何实现上述功能：

<template><el-row v-for="(item, index) in appDeployForm.detail" :key="index"><el-col :span="24"><el-form-item :label="$t('labels.host')"><el-table:data="item.hostForm"borderstyle="width:90%"highlight-current-row@selection-change="handleSelectionChange(item, $event)"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="name" :label="$t('columns.hostName')" align="left" min-width="5"></el-table-column><el-table-column prop="operation" :label="$t('columns.operation')" align="center" min-width="5"><template #default="scope"><a style="color:#1890ff;cursor:pointer" @click="deleteHost(scope.$index, scope.row, index)">删除</a></template></el-table-column></el-table></el-form-item><el-pagination@current-change="handlePageChange(item, $event)":current-page="item.currentPage":page-size="item.pageSize":total="item.total"></el-pagination></el-col></el-row>
</template><script>
export default {data() {return {appDeployForm: {detail: [{ hostForm: [], selectedHosts: [], currentPage: 1, pageSize: 10, total: 0 },{ hostForm: [], selectedHosts: [], currentPage: 1, pageSize: 10, total: 0 }]}};},methods: {handleSelectionChange(item, selectedRows) {item.selectedHosts = selectedRows;},deleteHost(index, row, tableIndex) {// 删除逻辑},handlePageChange(item, newPage) {item.currentPage = newPage;// 更新表格数据逻辑}}
};
</script>

总结

通过以上步骤，可以在 Vue 3 应用中实现分页功能，并确保在切换分页时选中的项能够保留，同时控制多个表格之间的选中状态不互相影响。这种设计提升了用户体验，使得操作更加直观和灵活。