Question

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

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的数据行溢出了它的底部边界。看起来这个溢出的高度是标题的高度。

Fiddle

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

Answer 1

您应该使用maxHeight的{{1}}道具（ not height）来设置高度，而不是修改DOM元素。

查看official docs：

使用maxHeight设置表格的最大高度。您需要提供一个单位（px）值的字符串，如height：

只需进行以下更改：

<BootstrapTable>

您可能还希望在构造函数中初始化componentDidMount() { let height = 200; this.setState({tableHeight: height + "px"}); } render() { ... <BootstrapTable maxHeight={this.state.tableHeight} id="table" data={this.state.products} striped hover> ... } ...

jsfiddle

如果你仍然希望以你的方式更新样式，直接通过DOM而不是React（尽管不鼓励），你可以这样做：

this.state.tableHeight

请注意，我使用了componentDidMount() { let height = 200; const tableElement = document.getElementsByClassName('react-bs-container-body')[0]; tableElement.style.maxHeight = height + 'px'; }而不是react-bs-container-body。

jsfiddle

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

1 个答案: