antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果

亲爱的产品经理和boss,一直想要这样的一个效果
表格中勾选行 实现 单选可取消,多选双击后只选中当前行的效果
基于项目中使用的antd table组件,听取了leader给出的方案建议,算是实现了该功能
最关键的是利用table组件中rowSelcton的rederCell属性

核心实现方案:利用renderCell在该位置渲染一个CheckBox,而该CheckBox可拿到当前的record的信息,可利用表格的rowKey去维护一份selectedKeys数组

1、CheckBox的变化会更新该selectedKeys数组,而CheckBox的选中与否的渲染也由该数组是否还有该行record的key来判定。

2、在CheckBox外层包裹一层div,div上绑定双击事件的监听,div也可以拿到该行record信息,响应事件去修改全局维护的selectedKeys数组来实现双击只选中当前行的效果

3、单选也利用CheckBox实现,不利用表格自身的单选功能

关键代码实现如下:

PS:项目中利用了全局的状态管理来维护选中项的keys,命名为selectedValues,可根据自身情况更改

table组件中rowSelection的配置:

rowSelection={{
 selectedRowKeys: selectedValues, // PS:逻辑上来讲,这一行也不需要了,不过没有经过删除掉的测试,留着也没啥大问题
 fixed: true,
 hideSelectAll: true,
 preserveSelectedRowKeys: true,
 
 renderCell(value, record, index, originNode) {
 return (
 <div onDoubleClick={() => handleCheckBoxDoubleClick(record.key)}>
 <Checkbox
 checked={(selectedValues || []).includes(record.key)}
 onChange={(e) => handleCheckBoxChange(e, record.key)}
 ></Checkbox>
 </div>
 );
 },
 }}

CheckBox的选中变化的响应:

const handleCheckBoxChange = (e: CheckboxChangeEvent, recordKey: string) => {
 let newSelectedValues: string[] = selectedValues || [];
 // 多选模式
 
 if (slicerSetting?.selectType === 'more') { //项目中判定用户选择的多选模式或单选模式的setting,根据自身使用更改
 if (e.target.checked) {
 newSelectedValues = [...newSelectedValues, recordKey];
 // newSelectedValues.push(recordKey);
 } else {
 newSelectedValues = newSelectedValues.filter((item) => item !== recordKey);
 }
 }
 // 单选模式
 else {
 newSelectedValues = e.target.checked ? [recordKey] : [];
 }
 //更新全局的选中项keys的数组
 dispatch(setSlicerSelectedValues({ selectedValues: newSelectedValues as string[], chartId: chartId }));
 };

多选模式下双击CheckBox的响应:

 const handleCheckBoxDoubleClick = (recordKey: string) => {
 // 多选模式
 if (slicerSetting?.selectType === 'more') { //项目中判定用户选择的多选模式或单选模式的setting,根据自身使用更改
 //更新全局的选中项keys的数组
 dispatch(setSlicerSelectedValues({ selectedValues: [recordKey], chartId: chartId }));
 }
 };
作者:凪原文地址:https://segmentfault.com/a/1190000043477420

%s 个评论

要回复文章请先登录注册