在 Vue 3 中实现分页功能,并确保在切换分页时选中的选项能够保留,同时控制多个表格之间的选中状态不互相影响,可以按照以下步骤进行:
1. 数据结构设计
为每个表格维护独立的选中项和分页状态。可以使用一个对象来存储每个表格的选中项和分页信息:
javascript
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
组件。确保每个表格都能独立管理自己的选中项和分页状态:
html
<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"
border
style="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
事件中,更新对应表格的选中项:
javascript
methods: {
handleSelectionChange(item, selectedRows) {
item.selectedHosts = selectedRows;
},
deleteHost(index, row, tableIndex) {
// 删除逻辑
},
handlePageChange(item, newPage) {
item.currentPage = newPage;
// 这里可以添加逻辑来更新表格数据,例如重新请求数据
}
}
4. 保持选中项
在切换分页时,确保选中项能够保留。由于每个表格的选中项是独立的,切换分页不会影响其他表格的选中状态。
5. 示例代码
以下是完整的示例代码,展示了如何实现上述功能:
html
<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"
border
style="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 应用中实现分页功能,并确保在切换分页时选中的项能够保留,同时控制多个表格之间的选中状态不互相影响。这种设计提升了用户体验,使得操作更加直观和灵活。