Fluent UI DetailsList 在 ColumnResize 上调整列文本大小

问题描述

我有一个包含文档数据的详细信息列表,我想要与常规文档库中的 FileName 列具有相同的行为。在文档库中,在调整 FileName 列的大小时,FileName 文本显示 ... 当文件名大于列宽时。

我们如何在 DetailsList 列中执行此操作?现在我正在使用自定义反应组件来呈现 FileName 列的单元格值,其中 Label 控件呈现文件名文本。我正在捕获列调整大小事件并将列宽作为 rxjs 事件传递给该自定义反应组件。事件正在每个单元格内被捕获,但如何调整标签控件的大小?

还有比使用 RxJS 事件更好的方法吗?

所有这些都在一个 SPFx React WebPart 组件中。

解决方法

根据文档,当你定义列时,你继承了IColumn接口。 IColumn 接口具有可以使用的 calculatedWidthcurrentWidthmaxWidthminWidth 属性。
IColumn interface 供您参考。