element table删除最后一页最后一条数据数据丢失问题

该博客介绍了一个用于处理不分页数据的函数,该函数确保在删除操作后能够正确调整页面位置。在删除最后一页的数据时,它会自动将用户重定向到上一页。博客还展示了如何定义和使用分页查询对象,并指出在删除逻辑完成后调用此函数可以刷新列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 这个是处理不分页的函数

// 目录的
pageLook() {
  console.log(this);
  // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
  const resultsPagination = Math.ceil(
    (this.resultsPagination.total - 1) / this.resultsPagination.size
  ); // 总页数
  this.resultsPagination.current =
    this.resultsPagination.current > resultsPagination
      ? resultsPagination
      : this.resultsPagination.current;
  this.resultsPagination.current =
    this.resultsPagination.current < 1 ? 1 : this.resultsPagination.current;
}

对应的分页查询对象   根据自己定义的替换处理分页函数中变量

      // 查询条件
      resultsPagination: {
        total: 0,
        current: 1, // 页数
        size: "10", //每页中显示10条数据

      },

处理分页函数在删除逻辑结束后 重新调用刷新列表的函数前调用即可

### 解决方案 当 `el-table` 组件中的 `selection-change` 事件触发时,如果发现总是少选一条记录,通常是因为组件内部状态管理不当或配置错误所致。 #### 原因分析 1. **数据绑定方式** 如果给 `el-table` 传递 `data` 属性时使用了函数而非静态数组,这可能导致每次渲染时都重新创建一个新的对象实例,进而影响选择状态的保持[^1]。 2. **缺少唯一标识符** 若未指定 `row-key` 或者 `row-key` 设置不合理,Element Plus 将无法正确识别每一行的独特性,从而造成选择逻辑混乱。确保每条记录都有唯一的键值用于区分是非常重要的[^4]。 3. **保留选择配置缺失** 对于分页场景下的多选需求,应该开启 `reserve-selection` 配置项来维持跨页面的选择状态不变。否则,在切换页面后再回到原页面时,之前的选择会被重置[^3]。 4. **手动干预选择行为** 在某些情况下,开发者可能在监听器内对传入的新选择列表做了额外处理(比如过滤),如果不小心修改了原始参数,则会影响最终呈现的结果[^2]。 #### 实施建议 为了修复上述提到的问题并实现稳定可靠的多选功能: - 使用静态数组作为表格的数据源; - 显式声明 `row-key` 并保证其值在整个生命周期内的稳定性; - 开启 `reserve-selection` 功能支持分页情况下的持续选择; - 调整业务逻辑避免直接操纵由框架提供的回调参数; 下面是一个改进后的代码片段示例: ```html <template> <div> <!-- 表格 --> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="uniqueId" <!-- 添加此属性 --> :reserve-selection="true"> <!-- 启用持久化选择 --> <el-table-column type="selection"></el-table-column> ... </el-table> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const tableData = [ // 初始化表单数据... ]; // 存储当前被选中的行ID集合 let selectedIds = new Set(); function handleSelectionChange(selection) { const currentSelectedIds = selection.map(item => item.uniqueId); // 更新本地存储的状态而不是覆盖它 Array.from(currentSelectedIds).forEach(id => selectedIds.add(id)); } </script> ``` 通过以上调整可以有效防止 `selection-change` 事件丢失任何一次有效的用户交互动作,并确保所有预期的目标都能正常加入到已选项当中去。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

湖光一天雷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值