首页 > 其他分享 >Ant Design Vue 的 a-table 行选择分页时bug处理

Ant Design Vue 的 a-table 行选择分页时bug处理

时间:2024-10-31 15:47:18浏览次数:7  
标签:index Vue Ant record selectedRowKeys Design selectedRows table id

有bug的伪代码如下(示例以 id 来作为 rowKey):

<a-table
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :columns="columns"
    rowKey="id"
    :pagination="pagination"
    :data-source="data"
/>    

 

onSelectChange(selectedRowKeys, selectedRows) {
  console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
  this.selectedRowKeys = selectedRowKeys;
}

 

当使用a-table对数据进行选择操作时,如果a-table有分页,并且选中的数据跨页,那么就会出现 selectedRowKeys.length 和 selectedRows.length 不一致的情况;

即 selectedRowKeys 的数据是完整的,而 selectedRows 的数据是有缺失的,会丢失其他页选中的数据。

 

解决方案:

将 a-table 的 row-selection 改为

:row-selection="{ selectedRowKeys: selectedRowKeys, onSelect: onSelect }"

选中执行的方法改为

onSelect(record, selected, selectedRows, nativeEvent) {
  if(selected) {
    this.selectedRows.push(record)
    this.selectedRowKeys.push(record.id)
  } else {
    const index = this.selectedRows.findIndex(item => item.id=== record.id)
    this.selectedRows.splice(index, 1)
    this.selectedRowKeys.splice(index, 1)
  }
}

 

标签:index,Vue,Ant,record,selectedRowKeys,Design,selectedRows,table,id
From: https://www.cnblogs.com/djjlovedjj/p/18518001

相关文章

  • Vue组件化-插槽Slot
    认识插槽Slot如何使用插槽slot?插槽的默认内容多个插槽的效果具名插槽的使用◼事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用具名插槽:具名插槽顾名思义就是给插槽起一个名字,<slot>元素有一个特殊的attribute:name;一个不带name的slot,会带有隐......
  • Vue3+Elementplus+Univer-Sheet实现在线excel及其需要注意的点
    1、准备项目环境Vue3自行准备node.js环境2、ElementPlus官网官网安装教程自行参照官网3、Univer插件官网1)官网网址2)开始直接点击GetStarted侧边栏点击  后面直接按照教程走即可 4、配置插件需要注意如果上述插件包已经下载并成功引入vue......
  • 基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoo......
  • 基于SpringBoot+MySQL+SSM+Vue.js的宠物猫售卖管理
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频基于SpringBoot+MySQL+SSM+Vue.js的宠物猫售卖管理技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基......
  • ElevenLabs Voice Design:文本生成个性化语音;科学家用 AI 解读猪叫声背后情绪和压力丨R
       开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(Real-TimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编......
  • 深入探索ReentrantLock(二):解锁中断响应机制
     专栏导航JVM工作原理与实战RabbitMQ入门指南从零开始了解大数据目录前言一、ReentrantLock中断响应机制1.lockInterruptibly()方法讲解2.lockInterruptibly()相比于lock()的优势3.lockInterruptibly()案例总结前言Java并发编程中,ReentrantLock作为可重入互斥......
  • Adobe InDesign 2025 v20.0 (macOS, Windows) - 版面设计和桌面出版软件
    AdobeInDesign2025v20.0(macOS,Windows)-版面设计和桌面出版软件Acrobat、AfterEffects、Animate、Audition、Bridge、CharacterAnimator、Dimension、Dreamweaver、Illustrator、InCopy、InDesign、LightroomClassic、MediaEncoder、Photoshop、PremierePro、Adobe......
  • 基于node.js+vue基于Android的中学生成绩管理系统前(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于中学生成绩管理系统的研究,现有研究主要以传统的桌面应用或网页端应用为主,专门针对Android平台的中学生成绩管理系统的研究较少。在国内外,教育信息化......
  • 基于node.js+vue基于Android平台的上门诊疗app前(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景随着移动互联网技术的飞速发展,智能手机在人们生活中的普及程度越来越高。在医疗领域,利用移动平台改善医疗服务的需求日益增长。关于医疗服务的信息化研......
  • Vue项目在安装依赖时报错:this[kHandle] = new _Hash(algorithm, xofLen)
    原因:这个错误通常是由于Node.js版本更新导致的。新版本的Node.js包含了OpenSSL3.0,它对加密算法和密钥大小有更严格的限制,可能会影响一些旧项目。解决方案:临时解决(需要每次启动时设置):在VSCode终端中:$env:NODE_OPTIONS="--openssl-legacy-provider"在WindowsCMD......