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

Question

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

• 具有长名称的标题应显示 2 行文本，而不是像下图所示的一个和“...”：

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

代码在这里：

<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

根据文档，您可以进行所需的所有自定义。

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

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

第二个问题：您可以使用trClassName属性处理行的高度。您可以传递字符串或函数来处理每个或使条件类依赖于行。在此处查看更多信息。

例如：

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

并定义您的customClass：

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

祝好运并玩得开心点！