2

我需要以编程方式设置元素的高度BootstrapTable（因为我想确保表格将可用空间占用到浏览器窗口的底部）。我尝试height使用 CSS 类设置 div 的CSS 属性（如果我在元素的属性中react-bs-table设置它，那么高度会出现在那里）。看起来像这样：heightBootstrapTable

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溢出它的底部边框。似乎此溢出的高度是标题的高度。

小提琴

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

4

1 回答 1

3

您应该使用maxHeightprop ( not height )<BootstrapTable>来设置高度，而不是修改 DOM 元素。

看看官方文档：

用于maxHeight设置表格的最大高度。您需要给出一个带有 unit(px) 值的字符串，例如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

于 2017-05-11T14:09:48.637 回答