Detailslist忽略列

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>

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

Answer 1

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

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' }
  ];