Question

我正在使用反应引导程序表来显示存储在info数组中的一些数据。

<BootstrapTable data={info} striped={true} hover={true} search={true} condensed={true} selectRow={selectRowProp(onRowSelect, info, selected)}>
    <TableHeaderColumn isKey={true} dataField="name"> Name </TableHeaderColumn>
    <TableHeaderColumn dataField="class"> Class </TableHeaderColumn>
    <TableHeaderColumn dataFormat={myStyle} dataField="price"> Price </TableHeaderColumn>
</BootstrapTable>

某些行可能有一个额外的属性oldPrice，我想在显示的价格上显示为工具提示。我怎么能这样做？

Answer 1

相关，如果要在悬停时显示单元格的值，则需要编写一个小函数：

const columnHover = (cell, row, enumObject, rowIndex) => {
    return cell
  }

<TableHeaderColumn
    width='260px'
    dataField='cellContents'
    editable={false}
    dataSort
    columnTitle={columnHover}
    >
    Some text
</TableHeaderColumn>

Answer 2

您可以将 columnTitle 属性用作columnTitle =“在此处放置您的旧价格”

<TableHeaderColumn dataFormat={myStyle} dataField="price" columnTitle="Put your old price here"> Price </TableHeaderColumn>

Answer 3

在BootstrapTable外部设置工具提示组件。使用TableHeaderColumn上的columnClassName属性为您的价格单元格提供一个类，您可以将工具提示附加到使用tether。

用工具提示反应bootstrap表

3 个答案: