关于typescript: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 }));
    }
  };