4

react-bootstrap-table私は縦スクロールを使用し、必要としています。私のコード:

<BootstrapTable data={products} hover>
      <TableHeaderColumn isKey dataField='id' width='10%'>
          Product ID
      </TableHeaderColumn>
      <TableHeaderColumn dataField='name'>
          Product Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

このコードは正常に機能し、自動幅サイズ変更可能なテーブルを取得します。その後、次のキーを追加しました。

<BootstrapTable data={products} hover height='200px'>

で問題が発生しました100% width。テーブル幅のサイズを変更する代わりに、下の図のようにもう 1 つスクロールしました。

ここに画像の説明を入力 どうすればこれを修正できますか?

4

2 に答える 2

3

また、問題を開き、ライブラリの作成者が解決策をアドバイスしました。

printableキーオンを追加する必要がありますBootstrapTable

また、私も追加bodyStyle={{overflow: 'overlay'}}しBootstrapTableました。

于 2017-09-06T14:06:16.970 に答える
1

これをここに追加したかったのは、展開された行を使用するときにずれを修正する方法を見つけようとして多くの時間を費やしたからです。

これはすべて、テーブルに垂直スクロール バーがある場合にのみ適用されます。

テーブルの幅に影響を与える折りたたみ可能なサイドバーがあるという点で、少し独特の問題がありました。サイドバーを折りたたんで行を展開すると、テーブルの列幅が自動調整されます。サイドバーを再度折りたたむと、テーブルが広すぎて水平スクロールバーが表示されます。それに加えて、テーブルはユーザーが行を展開するたびに列幅を再計算します。

私の解決策は、レンダリング中に垂直スクロールバーを取り除くことでした:

componentWillUpdate(){
    document.querySelector('.react-bs-table-container').style.height = "auto"
}
componentDidUpdate(){
    document.querySelector('.react-bs-table-container').style.height = "100%"
}

componentWillUpdate はまもなく廃止されますが、今のところ完全に機能しています。

于 2018-05-14T05:57:55.207 に答える