敬爱的产品经理和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 })); } };