Question

我正在使用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 来追加其他列。有什么我想念的还是更好的方法？

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);

在详细信息列表的column属性内使用this.displayColumns。

Fabric UI详细信息列表的其他列[反应SPFx]

1 个答案: