在el-tab-pane中使用封装的table组件遇到的布局问题
许多开发者在使用Element UI组件库时，会遇到将自定义组件嵌套在其他组件中导致样式错乱的问题。本文将针对一个在el-tab-pane中使用封装的Table组件时出现的布局问题进行分析和解答。问题表现为：表格数据滚动效果异常，页脚工具栏样式丢失，且在开发者工具打开时，页脚被遮挡。该问题仅在el-tab-pane中出现，而在其他页面使用相同的Table组件则一切正常。
问题描述中提到，开发者在el-tab-pane组件内使用了自定义的infoTable组件（该组件内部包含一个Table组件）。在el-tab-pane标签页中，表格的高度固定为700px，导致滚动条失效，页脚工具栏样式错乱，且在打开浏览器开发者工具时，页脚被开发者工具面板遮挡。而其他页面使用该infoTable组件时则不会出现此类问题。
造成这个问题的根本原因在于infoTable组件的高度设置过于死板。 700px 的固定高度无法适应不同内容和屏幕尺寸的变化。当内容高度超过700px时，就会出现滚动条失效和页脚样式错乱的问题。而开发者工具面板的出现则进一步加剧了布局冲突，导致页脚被遮挡。
解决方案是将infoTable组件的高度设置为动态值。建议将表格高度设置为calc(100vh - 200px)，或者使用内联样式style="height: calc(clientWidth - 固定高度)"，其中200px或“固定高度”的值需要根据实际页面布局调整，以确保表格能够根据浏览器窗口高度和内容高度自适应调整，从而避免高度冲突。通过这种方式，可以确保infoTable组件能够根据实际内容动态调整高度，解决滚动条失效和页脚样式错乱的问题。 同时，动态高度的设置也能避免开发者工具面板遮挡页脚的问题。
