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

Question

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

checkboxVisibility={CheckboxVisibility.always}

要使复选框始终可见，请执行以下操作。但这对标题中的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}属性并查看输出。all复选框将始终可见，包括标题中的复选框。

Answer 2

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

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