乐趣区

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

jiezi

敬爱的产品经理和 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 }));
    }
  };
退出移动版