如何在 Ant Design Table 中有条件地启用复选框？

Question

我想在选定行 > 3 时禁用未选定行。我做到了，但我不知道如何在选定行 < 3 时将其从禁用中取回。我该怎么办？我尝试了 selected.length < 3 的 renderCell return 普通复选框，但它不起作用。

这是我的代码：https://codesandbox.io/s/selection-ant-design-demo-forked-4s6uo?file=/index.js

Answer 1

行选择不需要额外的状态。 rowSelection 的 onChange 道具为您提供选定的行。我们只需要映射它来获取行键。

onChange: (selectedRowKeys, selectedRows) => {
              setSelected(selectedRows.map(row => row.key))
            },

获得行键后，现在我们需要做的就是检查行键是否不属于所选键的一部分。如果所选行大于 2 并且该行的键不在所选键中，那么我们将禁用它。

getCheckboxProps: (record) => {
              if (selected.length > 2) {
                return {
                  disabled: !selected.includes(record.key) 
                };
              }
            }

完整代码

const Demo = () => {
  const [selected, setSelected] = useState([]);

  return (
    <Table
      rowSelection={{
        onChange: (selectedRowKeys, selectedRows) => {
          setSelected(selectedRows.map(row => row.key))
        },
        getCheckboxProps: (record) => {
          if (selected.length > 2) {
            return {
              disabled: !selected.includes(record.key) 
            };
          }
        }
      }}
      columns={columns}
      dataSource={data}
    />
  );
};

工作沙盒

Disabling Rows

如何在 Ant Design Table 中有条件地启用复选框？

How to enable checkboxs in Table of Ant Design by conditional?

reactjs

antd