react antd Table 选中某一行，其它行也被选中了

问题描述：

使用react_antd_design 中的Table组件，渲染的结果如下：

但是现在出现的问题是当我选中其中的一行，其他的行也变成了选中的状态，无法实现选中单行

这当然不是我们想要的结果，那么是什么原因导致了这样的结果，如何来进行解决

因为每一行都有一个Key ，如果我们不设置的话，那么每一行的的key都是相同的，所以导致我们在选择的时候，才会没有区别，选中其中一个，其他的自动的被选了。

如何来解决，那就是需要我们设置每一行的key都是不同的，在Table的属性中有rowKey这个属性，我们需要做的是给每行设置不同的key，就可以进行单选

也就是上面rowKey 这个属性

 rowKey={record => record.rowguid}

当然这个里面的rowguid 是我在后台的返回的数据中包含了这一列

上面就实现了我们去选中某一行的数据

希望对你有所帮助

react antd Table 选中某一行，其它行也被选中了相关推荐

React antd table使用react-resizable实现伸缩列
首先声明注意点: 1.设置列宽的width一定要用number类型.(如果不使用number类型,会出现第一次点击时卡顿的情况) 2.less中需要设置类的样式,如果无效,可以尝试加上:global( ...
React antd Table 实现单元格点击表头斜线分组等功能
先上成品示意图: 几个关键步骤: 一定义数据结构: export const data = [{key: 'row1',beforeUpdateLevel: '等级1',level_1: '保',l ...
react antd Table 表格 td超出自动换行
1.问题: 目前有打印需求遇到了点问题,打印时表头太长导致出现横向滚动条,而借助于 react-to-print只能打印出视图区可见内容,所以打印的时候滚动条里面的内容没打印到. 现在为了完整打印页面 ...
react antd 更改table 表头和表行样式
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识: 1 创建react项目(本实例基于react项目) 2 知道如何导入和调用组件样式效果如下图: 实现方法目录结构: YMColl ...
Antd Table 点击行变换背景颜色 (Antd React)
需求实现的目标是,点击这一行,然后出现一个modal,这个modal可以拖拽,并且可以知道是点击哪一行出现的事件. 那么需要做的就是,点击这一行,然后其背景颜色变化. 实现 Antd Table有 ...
React使用antd Table生成层级多选组件
一.需求用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...
react - antd （Table 与 Cascader 平级数据转树形实操）
如果你刚开始学习前端或者 React,将 UI 框架作为你的第一步可能不是最好的主意. (这是引用antd官网的一句话),虽然说一开始用antd作为UI框架对新手来说并不是很好,但是如果工作需要呢,那 ...
jeecgboot：主表（antd table）默认选中第一条记录
问题描述: 使用jeecgboot框架生成ERP主题的主附表样式,主表默认不选中任何记录,每次需要手动点击一条,下边的附表才能显示对应的查询记录,我们现在要做的是让主表默认选中第一条. 解决思路: 刚 ...
antd Table 实现表格行固定
需求: antd Table 只有列固定和表头固定,但是我的需求是行固定前三行固定. 实现步骤方式一.表格固定行(rowClassName 实现) 思路是 :用position: sti ...

react antd Table 选中某一行，其它行也被选中了

react antd Table 选中某一行，其它行也被选中了相关推荐

最新文章

热门文章