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"
        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 事件中，更新对应表格的选中项：

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"
          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 应用中实现分页功能，并确保在切换分页时选中的项能够保留，同时控制多个表格之间的选中状态不互相影响。这种设计提升了用户体验，使得操作更加直观和灵活。