共计 1747 个字符,预计需要花费 5 分钟才能阅读完成。
敬爱的产品经理和 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 }));
}
};
正文完
发表至: typescript
2023-02-27