首先项目是尚硅谷的后台谷粒平台,在用到antd Table 中的rowSelection时,出现了一个问题(P87时遇到的问题): 表格中的每一项前面有一个radio单选框可以选中,本来是想利用rowSelection来选择行时就可以选中该单选框(见下图) 但是会发现有一个bug,就是此时移到角色旁边的单选框,鼠标变为触手时,再点击却无任何反应,...
antd官网例子上默认是点击checkbox或者radio才会选中,这对体验上来说有点不太方便,所以需求是要做成点击Table的整行直接触发选中。 其实官方也有给了个例子:https://codesandbox.io/s/000vqw38rl,这是使用class写的checkbox框。 但是我项目是使用hooks的,而且是个radio框,所以就自己写了个 实现 这个其实没啥好多说...
antd table 点击行触发radio 或 checkbox UIStore.ts (使用mobx)1import { observable, action, computed } from 'mobx' 2export class UIStore {3@observable public selectedRowKeys: string[] = []//单选 选中的key4@action5public onSelectedRowKeysChange = (selectedRowKeys: string[]) =>{6this.selecte...
当table组件多选时,会将所有的表格数据全部选中。 在组件中官网有提供rowSelection方法,可以让Table的第一列成为联动的选择框以及通过rowSelection.selectedRowKeys来控制选项。 比较坑的是 selectedRowKeys控制的只是dataSource当前的序号,必须加上rowKey={record =>record.userId},如果不加上会导致联动的选择框异常,row...
REACT使⽤antdTable中rowSelection遇到的问题 ⾸先项⽬是尚硅⾕的后台⾕粒平台,在⽤到antd Table 中的rowSelection时,出现了⼀个问题(P87时遇到的问题): 表格中的每⼀项前⾯有⼀个radio单选框可以选中,本来是想利 ⽤rowSelection来选择⾏时就可以选中该单选框(见下图)但是会发现有⼀个bug,...
当你只单击表中的一行时,antd-react的rowSelection会选择所有行的原因可能是你没有正确配置rowSelection属性。在antd-react中,rowSelection属性有几个可选的配置项,包括: type:选择模式,可选值为"checkbox"(多选)或"radio"(单选)。 selectedRowKeys:已选择的行的key值数组。
Table组件中需要点击单选框才能选中该选项,但是为了优化用户体验,需要点击行就可以实现选中加高亮 image.png 组件代码: constrowSelection={onChange:(selectedRowKeys:React.Key[],selectedRows:DataType[])=>{console.log(`selectedRowKeys:${selectedRowKeys}`,'selectedRows: ',selectedRows);},getCheckboxProps...
:rowSelection="{selectedRowKeys:selectedRowKeys,onChange:onSelectChange,type:'radio'}" //注释:配置参数 type类型 默认值为 Checkbox 多选 配置参数 type类型 默认值为 radio多选 :scroll="{x: 3200}" :showHeder="true" @change="handleTableChange"></a-table> ...
rowSelection 有一个控制选择框宽度的属性:columnWidth,但就算设置的很小,整列还是会被内容撑开 下面的代码仅用来做演示,没有没有加前缀,注意不要把全局的 Table 列宽都修改了。 .ant-table-selection-column > .ant-checkbox-wrapper{ width: 16px; } .ant-table-selection-column > .ant-radio-wrapper{ wid...
动态更改rowSelection的问题 问题出现的环境背景及自己尝试过哪些方法 3种情况,官方给出type 为 checkbox | radio 但是 还有不需要的情况,动态更改,比如封装的时候,有些需要,有些则没有,如果传false,会给出warning(Failed prop type: Invalid prop rowSelection of type boolean supplied to Table, expected object...