程序员经验分享-hwhale

antd Table组件rowSelection方法的一些坑：table组件多选时，会选中上一页或者下一页的表格同行数据

2023-11-10 
<a-table
  :rowSelection="rowSelection"
  :columns="columns"
  :dataSource="dataSource"
>
</a-table>

在 table 组件中有 rowSelection方法，可以让Table的第一列成为联动的选择框。 API中说到通过
rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys
控制的只是dataSource当前的顺序编号。

需要注意的是：

在这里插入图片描述

一定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。

问题：

类似选中某页的几行数据，在修改、删除等操作后，其他分页的表格数据的行是选择状态，而不是我们选中的行数据。这是因为没有区分每页表格的id。
在这里插入图片描述

解决：

<a-table
  :rowSelection="rowSelection"
  :columns="columns"
  :dataSource="dataSource"
  :rowKey="row => row.id"
>
</a-table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

vuejs

antd Table组件rowSelection方法的一些坑：table组件多选时，会选中上一页或者下一页的表格同行数据 的相关文章

  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https

  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

  • Vue.js + Element UI：在更改时获取“event.target”

    我无法获取在事件处理程序中触发事件的 html 字段 在 javascript 中是event target 我有一个表格 附加到更改事件函数的输入元素 管理更改事件的函数 我的代码如下 var Main methods change pa

  • vue-chartjs 反应数据错误

    我正在尝试使用反应式数据混合vue chartjs http vue chartjs org home id reactive data 用于设置初始数据的已安装函数正在运行 我可以使用 API 响应正确查看图表 fetchSessionT

  • 如何从vuejs和firestore获取文档的id？

    我有这个代码可以从 firestore 获取所有文档 const getThemesList async commit gt const snapshot await firebase firestore collection themes

  • 使用 Nuxt 动态获取并编译模板

    我想从远程获取 svg 并通过编译使其栩栩如生 对于 赋予生命 我的意思是按类选择其中一些元素 并动态地将组件列表附加到其中 现在我只是使用 div div 我的组件如下所示 data return svg async created le

  • Vue 异步 catch 块中的错误对象在调试器中未定义

    我有这个 Vue 组件 它工作正常 但在 VSCode 中调试是一个问题

  • 如何在没有 API 请求的情况下使用 Nuxt.js 生成 100% 静态网站？

    我正在测试周围Nuxt js https nuxtjs org 生成静态网站 使用API 获取数据时是否可以生成100 静态站点 从而摆脱API和请求 根据我到目前为止的测试 所有文件都已正确生成并托管在Github 页面 https pa

  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov

  • Cytoscape 布局 - 处理锁定节点

    我正在使用 vue cytoscape 渲染图形并浏览树状数据结构 我的目标是扩展父节点并保持它们在图中的位置 我想简单地添加新的子节点 我的方法是锁定当前节点 添加子节点并解锁节点 this cy nodes lock for let d

  • 将变量从调用它的父页面传递给 Vue 组件

    我有一个简单的表格 显示了我的所有数据 主文件 php table class table table bordered table hover thead tr th Job Name th th Job Description th t

  • 在 Vue 3 的生产构建过程中从 Vue 模板中删除所有数据测试属性

    我在 TS 中使用 Vue3 最后一个 vue cli 我想在 vue loader 编译 vue 文件时获取所有节点 vnodes 元素 我需要读取节点属性并删除所有 数据测试 我尝试在 vue config js 中使用 module

  • 我应该如何处理 Vuex 中的事件？

    我习惯使用全局事件总线来处理跨组件方法 例如 var bus new Vue Component A bus emit DoSomethingInComponentB Component B bus on DoSomethingInComp

  • 为什么我从 c# 到 js 得到不同的 MD5 哈希值？

    我有一个用于加密密码的 C 函数 System Security Cryptography MD5CryptoServiceProvider md5Provider new System Security Cryptography MD5C

  • Nuxt JS 插件是否可以只运行一次？

    我有几个 VueX 操作 仅在服务器上运行 并从nuxtServerInit 它们向外部服务发出 HTTP 请求 这会减慢 TTFB 的速度 我想实现一个缓存插件 可以从 Redis 存储和检索值 目的是避免在每个请求的操作中发出 HTTP

  • workbox webpack 插件从预缓存清单中排除文件夹

    我正在将 workbox webpack 插件与 vue cli 3 一起使用 并且我想将文件夹中的文件排除在外 以免添加到预缓存清单中 请参阅下面我当前的文件结构 src 资产 CSS 壳文件1 svg文件2 svg文件3 svg svg

  • 为网格注入浏览器前缀不适用于 Vue

    我已经在这件事上浪费了一个下午的时间了 我被难住了 我发现IE11不支持grid template我需要使用 ms grid columns and ms grid rows相反 我正在尝试生成一些 CSS 并通过 Vue 方法注入它 这适

  • Vue 组件方法未在动态 HTML 中的事件上运行

    我正在尝试动态创建一些 HTML 内容并将 Vue 组件方法绑定到元素上的事件 然而这不起作用 下面是问题的描述和测试用例的片段 重现问题的步骤 Click 点我1 观察控制台 Click 切换工具提示的弹出框 Click 点我2 观察控制

  • 如何突出显示 Vuetify 菜单中的所选项目？

    我的侧边栏中有一个菜单 使用 vue router

  • 如何在 Nuxt 中点击链接下载文件？

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它

随机推荐

  • Qt串口接收一帧不完整问题

    1 串口通信接收不全问题 在触发接收后 调用一次waitForReadyRead 等待100ms 后续再readAll 目前都能完整接收一帧 connect m serialPort SIGNAL readyRead this SLOT r

  • xcode中如何显示文件后缀

    xcode14 3 用不惯mac电脑真恶心 改个显示文件后缀找半天 1 首先双击打开xcode软件 2 此时 电脑左上角出现xcode字样 左上角如果看不到xcode字样 再次点击xcode软件弹出来就有了 鼠标右键它 点击setting或

  • 安装zookeeper详解教程（windows单机版）(以及解决方法)

    1 下载安装包 Apache官网下载 我选的比较稳定的旧版本 地址 Apache ZooKeeperhttps zookeeper apache org releases html 2 解压到本地目录 3 配置文件 进入conf目录下将zo

  • A. Doremy‘s IQ（贪心）

    Problem A Codeforces 题意 一个人的IQ为q 有n场比赛 第i天只能参加第i场比赛 如果比赛难度大于IQ 那么IQ就会下降 如果IQ为0就不能参加比赛了 问最多能参加多少场比赛 输入一个01串 0表示不参加 1表示参加

  • 【nlp-with-transformers】

    今天社群中的小伙伴面试遇到了一个问题 如何保证生成式语言模型在同样的输入情况下可以保证同样的输出 这里面造成问题的因素有两个方面 一个方面是在forward过程中参数的计算出现了差异 这种情况一般发生在游戏显卡中 游戏显卡无法保证每一次底层

  • 基于用户的协同过滤算法（userCF）

    1 定义 userCF 当一个用户A需要个性化推荐时 可以先找到和他有相似兴趣的其他用户 然后把那些用户喜欢的 而用户A没有听说过的物品推荐给A 这种方法称为基于用户的协同过滤算法 基于用户的协同过滤算法主要包括两个步骤 2 第一步 找到和

  • c++ java rgb与nv21互转

    目录 jni函数 c rgb转nv21 可以转 不报错 但是转完只有黑白图 java yuv420保存图片 先转nv21 再保存ok c yuv420月bgr互转 测试ok jni函数 JNIEXPORT void JNICALL Java

  • 一.安装deepin

    笔记本是联想拯救者y7000 原配 cpu i5 8300h 三星内存8g 固态128g 2T机械 独显是nvidia gtx1050ti 后加装16G同品牌同频率内存组24G内存 固态128卸掉换512 伴随着几次win10升级 电脑待机

  • kingbaseES查询数据库里一个模式下所有的表以及大小

    1 例如以public模式为样例 SELECT table name sys size pretty table size AS table size sys size pretty indexes size AS indexes size

  • react usestate 更新_React中setState同步更新策略

    setState 同步更新 我们在上文中提及 为了提高性能React将setState设置为批次更新 即是异步操作函数 并不能以顺序控制流的方式设置某些事件 我们也不能依赖于this state来计算未来状态 典型的譬如我们希望在从服务端抓

  • 静态时序分析——单周期

    一 建立时间的检查 建立时间的检查是指检查电路里每一个触发器的数据和时钟的关系是否满足建立时间的要求 我们以上图为例进行建立时间检查 由图可知 我们主要针对第二个触发器UFF1进行检查 我们可以梳理时序关系如下 通过这个图 我们可以得到满足

  • 01 二叉树的BFS（广度、层次或水平遍历实现）【Binary Tree 二叉树】

    二叉树的遍历分为BFS和DFS两种大类 下面完整实现BFS遍历二叉树 例如二叉树 1 2 3 4 5 BFS遍历结果 1 2 3 4 5 具体的代码实现 方法一 采用递归遍历的方法实现 Recursive C program for lev

  • el-dialog分析

  • 上海AI实验室与商汤科技等发布“书生·浦语”大语言模型

    随着AI大语言模型越来越多地表现出接近人类的智能 面向人类设计的高难度 综合性考试被越来越多地引入对语言模型的智能水平进行评测 OpenAI在其关于GPT 4的技术报告中就主要通过各领域的考试对模型能力进行检验 2023年高考开考 中文大语

  • vue环境配置

    一 安装nvm 介绍 https zhuanlan zhihu com p 38819529 安装包 https github com coreybutler nvm windows releases 注意 安装路径不能有中文或者空格 在安

  • java输入输出的方法

    java输入输出 目录 一 控制台输入输出 二 文件读写 一 控制台输入输出 java控制台的输入输出主要依赖于scanner类 使用Scanner scanner new Scanner System in 获取了控制台输入的字段 其中s

  • 因果系列文章（9）——反事实（下）

    4月4日 新冠病毒全球累计确诊已经突破100万 其中美国已超过24万 4月2日 外交部新闻发言人华春莹在新闻发布会上质问美国 如果当初最先发生疫情的国家是美国 而不是中国 美国会处理的比中国更好吗 我们难以假设那种情况的存在 但是从美国现在

  • 设计模式:Adapter(适配器)--类对象结构型模式

    一 介绍 Adapter 适配器 也叫做包装器 wrapp 在许多时候横夺得类不能够被复用 仅仅是因为将一个类的接口与专业应用得接口不匹配 当一些类的接口互不兼容 这时候就需要适配器 它能将一个类的接口转化为客户希望的另一个接口 Adapt

  • freenas共享指定网络密码不正确_华为手机网络邻居连接（windows10）

    一 打开控制面板 微表键 R 输入control 程序和功能 找不到的可以把查看方式改为大图标 启用或关闭Windows功能 勾选SMB 1 0 CIFS 文件共享支持 需要重启电脑 二 开始菜单 设置 网络和Internet 属性 查看你

  • antd Table组件rowSelection方法的一些坑：table组件多选时，会选中上一页或者下一页的表格同行数据

热门标签