Fabric UI Detailslist 附加列[React SPFx]

Question

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

中安装 Web 部件

  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 以附加附加列.有什么我想念的或者有更好的方法吗？

Answer 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。

Fabric UI Detailslist 附加列[React SPFx]

Fabric UI Detailslist Additional Columns[React SPFx]

office-fabric

spfx