如何使 select 所有復選框在 office-ui-fabric-react 詳細信息列表中始終可見

Question

我正在使用 office-ui-fabric-react 的 DetailsList 組件來顯示我的表格。 我正在設置道具

checkboxVisibility={CheckboxVisibility.always}

使復選框始終可見。 但這不適用於 header 中的 select all 復選框。 Select 所有復選框僅在我通過 hover 時才可見。 我希望 select all 復選框始終可見。 有什么解決辦法嗎？

<DetailsList
    columns={this.columns}
    selectionMode={SelectionMode.single}
    ariaLabelForSelectAllCheckbox={'Select All'}
    items={this.items}
    checkboxVisibility={CheckboxVisibility.always}
    onRenderRow={this.renderRow}
    onRenderHeader={this.renderHeader}
/>

Answer 1

您還必須導入復選框可見性：

import { CheckboxVisibility } from 'office-ui-fabric-react';

Answer 2

您能否通過在 codepen 或 stackblitz 或任何其他在線編輯器上創建示例來共享代碼。

移除selectionMode={SelectionMode.single}屬性並查看 output。 all 復選框將始終可見，包括 header 中的復選框。