如何使 select 所有复选框在 office-ui-fabric-react DetailsList 中始终可见

Question

我正在使用 office-ui-fabric-react 的 DetailsList 组件来显示我的 table。我正在设置道具

checkboxVisibility={CheckboxVisibility.always}

使复选框始终可见。但这不适用于 header 中的 select all 复选框。 Select 只有当我将鼠标悬停在它上面时，所有复选框才可见。我希望 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

您能否通过在 codepen 或 stackblitz 或任何其他在线编辑器上创建示例来共享代码。

删除 selectionMode={SelectionMode.single} 属性并查看输出。所有复选框将始终可见，包括 header.

中的复选框

Answer 2

您还必须导入复选框可见性：

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