react-bootstrap-table-格式化-行高，文本换行

Question

我正在使用react-bootstrap-table，并且在格式化它时遇到了问题。主要问题是：

• 带有长名称的标头应显示两行文本，而不是一个和“ ...”，如下图所示：

• 此外，我绝对不能设置表格单行的高度。每个文本都有很大的填充，因此该表不太紧凑：

代码在这里：

<BootstrapTable
   data={this.props.sales}
   version="4"
   striped
   hover
   pagination
   keyField="Type"
>
  {tableHeaders.map((header, index) => (
     <TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
        {header.name}
     </TableHeaderColumn>
  ))}
</BootstrapTable>

Answer 1

根据docs，您可以进行所需的所有自定义操作。

第一个问题：要删除点，您可以使用thStyle属性，该属性可以传递给TableHeaderColumn组件并覆盖CSS white-space属性。

<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />

第二个问题：您可以使用trClassName属性处理行的高度。您可以传递字符串或函数来处理每个字符串，也可以使条件类取决于行。查看更多here。

例如：

<BootstrapTable trClassName="customClass" {...anotherProps} />

并定义您的customClass：

.customClass {
    // override padding or height whatever you want 
    padding: 3px;
}

祝你好运，玩得开心！