详细信息列表忽略列

Question

我有一个包含 5 列的项目数组，但我希望其中一列显示在详细信息列表中，所以我创建了一个这样的变量：

_columns: IColumn[] = [
    {
        key: 'Title',
        name: 'Title',
        fieldName: 'Title',
        minWidth: 100,            
        maxWidth: 200,
        isResizable: true,
        ariaLabel: 'Operations for Field'
    }];

这里是详细信息列表：

<MarqueeSelection selection={this._selection}>
                            <DetailsList
                                setKey={'items'}
                                items={items}
                                columns={columns}
                                selection={this._selection}                                    
                                selectionPreservedOnEmptyClick={true}
                                onItemInvoked={this._onItemInvoked}
                                dragDropEvents={this._getDragDropEvents()}
                                columnReorderOptions={this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined}
                                ariaLabelForSelectionColumn="Toggle selection"
                                ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                            />
                        </MarqueeSelection>

作为输出，它显示所有列并忽略列属性。

Answer 1

确保 fieldName 是项目对象中字段的名称。例如：

https://codepen.io/mohamedhmansour/pen/yQqaZx?editors=1010

假设 items 如下：

  const items = [
    { key: 'A', text: 'Item a' },
    { key: 'B', text: 'Item b' },
    { key: 'C', text: 'Item c' },
    { key: 'D', text: 'Item d' },
    { key: 'E', text: 'Item e' },
    { key: 'F', text: 'Item f' },
    { key: 'G', text: 'Item g' },
    { key: 'H', text: 'Item h' },
    { key: 'I', text: 'Item i' },
  ];

那么columns定义应该是：

  const columns = [
    { key: 'somekey1', name: 'Item', fieldName: 'text' }
  ];

详细信息列表忽略列

Detailslist ignores columns

office-ui-fabric