react-bootstrap-table: 如何以编程方式设置 BootstrapTable 元素的高度？

Question

我需要以编程方式设置 BootstrapTable 元素的高度（因为我想确保 table 将可用的 space 带到浏览器底部 window).我尝试将 CSS 属性 height 的 div 设置为 CSS class react-bs-table （这就是高度所在的位置）如果我在 BootstrapTable 元素的 height 属性中设置它，请执行）。看起来像这样：

componentDidMount() {
   // Calculate the height
   let height = 200; // Only simluated here!

   // Set the height
   const tableElement = document.getElementsByClassName('react-bs-table')[0];
   tableElement.style.height = height + 'px';
}

这种方法的问题是 BootstrapTable 的数据行溢出了它的底部边框。好像这个溢出的高度是 header.

的高度

Fiddle

如何正确设置 BootstrapTable 的高度（数据行不会溢出元素）？

Answer 1

你应该使用<BootstrapTable>的maxHeight属性（不是height）来设置高度，而不是修改DOM元素.

看看 official docs:

Use maxHeight to set the maximum height of table. You need give a string with an unit(px) value like height:

只需进行以下更改：

componentDidMount() {
  let height = 200;
  this.setState({tableHeight: height + "px"});
}

render() {
  ...
  <BootstrapTable maxHeight={this.state.tableHeight} id="table" data={this.state.products} striped hover>
  ...
}

您可能还想在构造函数中初始化 this.state.tableHeight...

jsfiddle

如果您仍想按照您的方式更新样式，直接通过 DOM 而不是使用 React（虽然不鼓励），您可以这样做：

componentDidMount() {
  let height = 200;
  const tableElement = document.getElementsByClassName('react-bs-container-body')[0];
  tableElement.style.maxHeight = height + 'px';
}

请注意，我使用的是 react-bs-container-body 而不是 react-bs-table。

jsfiddle

react-bootstrap-table: 如何以编程方式设置 BootstrapTable 元素的高度？

react-bootstrap-table: How to programmatically set the height of a BootstrapTable element?

reactjs

react-bootstrap-table