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 }));
}
};
antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果