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

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

相关推荐
dy171724 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5