Element Plus table component max-height is invalid? How to make the table highly adaptable and display scrollbars?

Element Plus table component max-height attribute failure and solution

During the development process using Element Plus, we often encounter the need for table height to change dynamically according to the content, but cannot be infinitely elongated. Ideally, the table height should grow as the content grows until it reaches 100% of the parent element, and a scroll bar appears to display the content beyond the section. However, setting the max-height: 100% attribute directly for the el-table component often does not achieve the expected effect. Although the table height will reach 100% of the parent element, the scroll bar cannot be displayed normally.

The fundamental reason for this problem is that the el-table component itself is highly computerized. The max-height property takes effect on a certain initial height, and when the content is not fully loaded or the content height changes, the el-table component cannot accurately calculate its own height, causing the max-height property to fail.

To solve this problem, we can take the following two methods:

The first method is to ensure that the el-table component has a definite height value. This can be achieved by setting the height property directly, such as height: 500px or height: calc(100vh - 100px). The disadvantage of this method is that it requires the ideal height of the table to be known or calculated in advance, and it is not flexible enough.

The second method is more flexible, it listens to the height changes of the parent element and dynamically assigns the height of the parent element to the el-table component. The specific implementation method requires using JavaScript to listen to the resize event of the parent element or using other responsive layout techniques. In this way, the height of the el-table component is always consistent with the height of the parent element, thus achieving the effect of max-height: 100%. Even if the content height exceeds the height of the parent element, the scroll bar can be displayed normally. This method can adaptively adjust the table height according to the size of the parent element, which is more in line with the requirements of dynamic content changes.

The above is the detailed content of Element Plus table component max-height is invalid? How to make the table highly adaptable and display scrollbars?. For more information, please follow other related articles on the PHP Chinese website!