当前位置: 首页 > news >正文

Antd-table全选踩坑记录

目录

一、需求

二、问题

​编辑三、解决

四、全选选中所有数据而不是当前页


一、需求

        最近遇到一个小小的需求,在我们这个项目中,有一个表格需要添加全选删除功能。这还不简单吗,于是我找到andt的官网,咔咔咔一顿cv,很快就把这个功能加上了,信心满满的开始自测,但是却发现了一些问题。

二、问题

        1.点击全选,只会选择当前页的所有选项,并且后年几页也会被选上,但选中数组中并不包含,第二页的选项,第二页的选项仍然会被勾选上。          这里数组长度只有10,但页面显示全部选择。

        2. 选择第一页的第一项,后续所有分页的第一项都会被勾选。

         3.获取的数组为对应的数据的索引下标,没有办法分辨数据。

三、解决

        实际上问题只有一个,那就是没有加对应的标识  rowKey  。少了这个玩意从而导致了包括但不限于以上的这些问题。

           还是没有好好看文档啊, 这样一设置,所有的问题都迎刃而解了。

         注意这里的  record.xx  是对应的行的某一项属性的属性值。在这里设置以后,获取的数组的内容就是对应的属性值了。

         看这里已经从索引下标变成了ID。到此为止,上面的三个问题都得到了相对应的解决。

四、全选选中所有数据而不是当前页

        在andt-table组件中的全选只是针对于当前页面的全选,如果想实现全部数据选取就需要加一个方法。

        可以在这里通过判断  selected  来将所有数据的rowkey值添加到数组中达到实现目的。

http://www.lryc.cn/news/397.html

相关文章:

  • 防灾必看,边滑坡安全预警解决方案
  • 你每天所做的工作,让你产生了成就感吗?
  • MySQL中的锁
  • WebView自定义进度条、加载动画,拿走直接用~
  • 内存数据库Apache Derby、H2
  • 麻省理工出版 | 2023年最新深度学习综述手册
  • vi命令详解
  • 抖音的外卖行业入局,为中小外卖企业创业者的机会给了哪些机会?
  • 供应PEG试剂AC-PEG-COOH,Acrylate-PEG-Acid,丙烯酸酯-PEG-羧基
  • java二叉排序树
  • 聊一聊 gRPC 的四种通信模式
  • 科技云报道:开源真的香,风险知多少?
  • 国产化适配迁移记录
  • 又一国产开源项目走向世界,百度RPC框架Apache bRPC正式成为ASF顶级项目
  • 多数据库学习之GBase8s查询数据库表元信息常用SQL
  • Jetpack之Lifecycle应用与源码分析
  • Python序列类型之集合
  • java 自定义json解析注解 复杂json解析
  • Vue3配置路由(vue-router)
  • 【代码随想录二刷】Day9-字符串-C++
  • google colab上如何下载bert相关模型
  • Vue2.0页面缓存机制联合页面标签的交互(keep-alive + router)
  • C++STL剖析(四)—— stack和queue的概念和使用
  • 流浪地球 | 建筑人是如何看待小破球里的黑科技的?
  • 软中断在bottom-half中调用
  • GEE遥感云大数据在林业中的应用
  • Apollo架构篇 - 客户端架构
  • JVM调优最全面的成长 :参数详解+垃圾算法+示例展示+类文件到源码+面试问题
  • linux驱动常用函数
  • Flowable进阶学习(九)数据对象DataObject、租户Tenant、接收任务ReceiveTask