office-ui-fabric - Office UI Fabric React - DetailsList 列的宽度

Question

如何配置DetailsList组件中的列以使它们对齐以适应内容？

Answer 1

不幸的是，我不相信DetailsList's Columns 目前支持适合其内容。每个 Column 定义采用minWidth, maxWidth, 和isResizable将列约束到某个维度，同时为用户提供调整大小的能力。IColumn 接口上没有内容换行或类似属性。这是一个例子。

Answer 2

return [...staticColumns, ...visibleColumns.map(c => {
    return  {
        key: c.Name,
        name: c.Title,
        fieldName: c.Name, 
        minWidth: 100,
        isResizable: true,
        isCollapsible: true,
        onRender: (item: any, index: number, column: IColumn) => {
          column.minWidth = 20;
          return <span>{item[c.Name]}</span>;
        },
    } as IColumn;
})];

首先设置初始 minWidth: 100，然后在 onRender 回调中更改为 20。这对我有用

Answer 3

您可以使用 maxWidth 属性来设置列宽。

function buildColumns(
  item,
  canResizeColumns,
  onColumnClick,
  sortedColumnKey,
  isSortedDescending,
  groupedColumnKey,
  isMultiline
) {
  const columns = [];

  if (item) {
    for (const propName in item) {
      if (item.hasOwnProperty(propName)) {
        columns.push({
          key: propName,
          name: item[propName].name,
          fieldName: propName,
          minWidth: MIN_COLUMN_WIDTH,
          maxWidth: item[propName].width,
        });
      }
    }
  }

  return columns;
}