Fabric UI 详细信息列表附加列[React SPFx]答案

【问题标题】：Fabric UI Detailslist Additional Columns[React SPFx]Fabric UI 详细信息列表附加列[React SPFx]
【发布时间】：2020-08-28 22:38:05
【问题描述】：

我正在使用 Fabric/Fluent UI DetailsList 组件构建一个 SPFx Webpart，并且我正在尝试根据从选择器中选择的安全组添加动态列（这可能会改变，但仍将是一个数组）。我找到了一些可以做到这一点的代码，并将其应用到我的项目中，但是 gulp 服务无法将 webpart 安装到工作台中。

  private _columns: IColumn[] = [
    {
      key: 'filepath',
      name: 'File path',
      onRender: item => (
        // tslint:disable-next-line:jsx-no-lxambda
        <Link key={item} onClick={() => this._navigate(item)}>
          {item}
        </Link>
      ),
    } as IColumn,
  ];

  private _addcolumns(_columns:IColumn[]): IColumn[] {
    for (let user of this.props.people) {
      _columns.push({
          key: 'permissionset',
          name: 'Permission',
          onRender: item => (<DropPermissionItem/>)
        } as IColumn,
      )
    }
    return _columns
  };

...

      <DetailsList
        key={this.state.key}
        items={this.state.items}
        columns={this._addcolumns(this._columns)}
        onItemInvoked={this._navigate}
        initialFocusedIndex={this.state.initialFocusedIndex}
        ariaLabelForSelectionColumn="Toggle selection"
        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
        checkButtonAriaLabel="Row checkbox"
      />

DetailsList 使用 _addColumns 并传入 _columns 以附加附加列。有什么我想念的还是有更好的方法？

【问题讨论】：

标签： spfx office-fabric

【解决方案1】：

我已经能够动态设置列数了。

  private _columns: IColumn[] = [
    {
      key: 'file',
      name: "File",
      minWidth: 60,
      onRender: item => (
        // tslint:disable-next-line:jsx-no-lxambda
        <Link key={item} onClick={() => this._navigate(item)}>
          {item}
        </Link>
      )
    },
    {
      key: 'permission',
      name: "permission",
      minWidth: 60,
      onRender: item => (<DropPermissionItem/>),
    }
  ];

  private _addcolumns(column: IColumn[]): IColumn[] {
    let _loadColumn = this._loadUser();
    if (_loadColumn == null){
        return column;
      } else
      {
        for (let col of _loadColumn) {
          column.push({
              key: 'permission',
              name: 'Permission',
              minWidth: 60,
              onRender: item => (<DropPermissionItem/>),
            }
          );
        }
        return column;
      }
  }

  private displayColumns: IColumn[] = this._addcolumns(this._columns);

在详细列表的列属性中使用this.displayColumns。

【讨论】：