有條件地禁用 antd 表中的 selectAll 復選框

Question

我希望有條件地禁用 antd 表中的 selectAll 復選框（在達到選擇/取消選擇的限制后，我們必須顯示該復選框已禁用） Antd 確實有一個道具hideSelectAll ，但是，我有一個特定的要求來禁用，而不是隱藏復選框。

Answer 1

我能夠解決這個問題，使用這個https://stackoverflow.com/a/61137799/7630232作為參考。 我們可以使用columnTitle用我們的自定義復選框組件（帶有道具）覆蓋 selectAll 復選框

Answer 2

然而，禁用 antd 表行中所有復選框的一種方法是在每個循環中在getCheckboxProps function 上返回{disabled: true} 。 如果你有一個唯一的鍵或項目，你可以用它來禁用特定的行，如果滿足一個條件就返回{disabled: true} 。 這是啟用前兩行復選框的示例：

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Bon Jov",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "5",
    name: "User 5",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "6",
    name: "User 6",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  }
];

const rowSelection = {
  getCheckboxProps: (record) => {
    const rowIndex = data.findIndex((item) => item.key === record.key);
    return {
      disabled: rowIndex > 1 //enable first 2 rows only
    };
  }
};

以下是禁用前 4 行的示例：

const rowSelection = {
  getCheckboxProps: (record) => {
    const rowIndex = data.findIndex((item) => item.key === record.key);
    return {
      disabled: rowIndex < 4 //disable the first 4 rows only
    };
  }
};

這是一個工作示例：

Answer 3

進一步了解 Akhil Raghav 的回答

如果您只想根據測試禁用某些行，例如如果您的數據具有某種狀態並且您只想禁用這些特定狀態。

const badStatuses = ["broken", "error"];

你可以做類似的事情

const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,

getCheckboxProps: (record) => {
  if (badStatuses.includes(record.status))
    return {
      disabled: true,
    };
  },
};