Question

我正在使用Office UI构造详细信息列表组件（https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist）。是否可以根据详细列表的输入来更改列标题名称？

我找到了一种更改Footer（https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customfooter）而不更改Header的方法，因为DetailsHeader中没有onRenderItemColumn道具。

有帮助吗？

Answer 1

DetailsColumn组件似乎总是呈现列的name属性值：https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx#L122。因此，我认为您每次在组件的render调用中更改“输入”时，都必须动态重新生成IColumn定义的新数组。

MyComponent:

state = { replaceSpaces: false, spaceReplacementChar: '_' };
columns = [{ name: 'Column 1', minWidth: 100, ... }];

...

getColumns(state) {
  return this.columns.map((column) => {
    return {
      ...column,
      name: state.replaceSpaces 
        ? column.name.replace(/\s/g, state.spaceReplacementChar)
        : column.name
    };
  });
}

...

render() {
  return (
    <DetailsList
      columns={this.getColumns(this.state)}
      {...this.othertableProps}
    />
  );
}

根据输入动态更改列名

1 个答案: