React-Table中选中5个复选框后动态禁用其余复选框求助

1. 获取当前选中的行数 #

在使用useTable的组件中，通过getSelectedRowModel()获取选中的行模型，计算选中行数：

const { getSelectedRowModel } = useTable({
  columns,
  data,
  // 你的其他配置项
});
const selectedRowCount = getSelectedRowModel().rows.length;

2. 扩展复选框的禁用条件 #

修改列定义中cell函数的disabled逻辑，加入选中数量≥5时禁用未选中的可选中行的判断：

cell: ({ row }) => {
  // 提取当前行的状态（对应你代码中第6列的值）
  const rowStatus = row.getAllCells()[5].getValue();
  // 判断当前行是否属于可选中的状态
  const isRowSelectable = 
    rowStatus !== "Cancelled" && 
    rowStatus !== "Completed" && 
    rowStatus !== "Failed";
  
  // 计算是否需要禁用当前复选框
  const shouldDisableCheckbox = 
    // 原有逻辑：不可选中的状态直接禁用
    !isRowSelectable || 
    // 新逻辑：选中数量已满5个，且当前行未被选中、同时是可选中状态
    (selectedRowCount >= 5 && !row.getIsSelected() && isRowSelectable);

  return (
    <div className="custom-checkbox">
      <IndeterminateCheckbox
        disabled={shouldDisableCheckbox}
        {...{
          checked: row.getIsSelected() && isRowSelectable,
          indeterminate: row.getIsSomeSelected(),
          setActionsVisible: setActionsVisible,
          onChange: row.getToggleSelectedHandler(),
          className: "custom-control-input",
        }}
      />
    </div>
  );
},

3. 处理表头全选复选框（可选但推荐） #

如果你的表格有表头全选复选框，也需要添加禁用逻辑，避免用户一次性选中超过5个：

header: ({ column }) => {
  // 计算所有可选中的行数
  const selectableRowCount = data.filter(row => 
    row.status !== "Cancelled" && row.status !== "Completed" && row.status !== "Failed"
  ).length;

  // 表头复选框禁用条件：已选中5个，或所有可选中行都已被选中
  const shouldDisableHeader = selectedRowCount >= 5 || selectedRowCount === selectableRowCount;

  return (
    <IndeterminateCheckbox
      disabled={shouldDisableHeader}
      {...{
        checked: column.getIsSelected(),
        indeterminate: column.getIsSomeSelected(),
        onChange: column.getToggleSelectedHandler(),
      }}
    />
  );
},

关键说明 #

• 当用户取消选中某行时，selectedRowCount会自动更新，shouldDisableCheckbox条件会重新计算，未选中的可选中行会自动恢复可用状态。
• 提取isRowSelectable变量是为了避免重复判断，让代码更清晰。
• 确保getSelectedRowModel()返回的行模型是实时更新的，React-Table会在选中状态变化时自动更新这个值，保证禁用逻辑实时生效。

内容的提问来源于stack exchange，提问作者Shivanshu Anand