Question

我正在使用react-bootstrap-table以表格格式显示我的数据。这是我当前代码的摘录：

   var table = (
            <BootstrapTable ref="table" data={convertedData} deleteRow={false} striped={true} search={false} pagination={true} hover={true} selectRow={selectRowProp}>
                <TableHeaderColumn columnClassName="col-md-1" dataField="field1" isKey={true}>field1</TableHeaderColumn>
                <TableHeaderColumn columnClassName="col-md-2" dataField="field2" >field2</TableHeaderColumn>
                <TableHeaderColumn columnClassName="col-md-2" dataField="field3">field3</TableHeaderColumn>
            </BootstrapTable>
        );
    }

    return (
        <div>
            <h2>{this.props.title}</h2>
            {table}
        </div>
    )
},

来自我的css文件：

.table td.col-md-7 {
  word-wrap: normal;
  overflow: auto;
  text-overflow: clip;
}

我面临的问题是具有大量文本的单元格，当我真正想要的是在单元格中的多行中显示文本时获取滚动条。

有关如何使这项工作的任何想法？

Answer 1

找到一种似乎没问题的方法：

function multilineCell(cell, row) {
    return "<textarea class='form-control cell' rows='3'>" + cell +"</textarea>";
}    
[...]
<TableHeaderColumn columnClassName="col-md-4" dataFormat={multilineCell} dataField="summary">Summary</TableHeaderColumn>

react-bootstrap-table中的多行单元格

1 个答案: