el-tabs 高度自适应

### 实现 `el-tabs` 高度自适应的方法 为了使 Element UI 的 `el-tabs` 组件能够自动调整其高度以适应内容，可以采用 CSS 和 JavaScript 结合的方式来处理。具体方法如下： #### 使用 CSS 设置弹性布局容器 创建一个具有弹性的父级容器用于包裹 `el-tabs` 及其他可能存在的兄弟元素。通过设置 `.tabs-container` 类为相对定位，并让子元素根据实际需求动态填充空间。 ```css .tabs-container { display: flex; flex-direction: column; height: 100%; /* 让容器占据可用的空间 */ } ``` #### 动态计算并应用 Tab Panel 的最大高度 对于每一个 tab panel (即 `<el-tab-pane>`)，可以通过监听窗口大小变化事件，在每次改变时重新测量剩余可利用的高度，并将其赋给对应的面板作为最大高度限制。 ```javascript // 假设已经初始化了一个 Vue 实例 vm vm.$nextTick(() => { function setTabPanelMaxHeight() { const containerRect = document.querySelector('.tabs-container').getBoundingClientRect(); Array.from(document.querySelectorAll('.el-tab-content')).forEach((panel, index) => { let headerHeight = document.querySelector(`.el-tabs__header`).offsetHeight || 0; let otherElementsHeightSum = [...document.querySelectorAll('.other-elements')].reduce( (sum, elem) => sum + elem.offsetHeight, 0 ); panel.style.maxHeight = `${containerRect.height - headerHeight - otherElementsHeightSum}px`; }); } window.addEventListener('resize', setTabPanelMaxHeight); // 初始化调用一次 setTabPanelMaxHeight(); }); ``` 上述代码片段展示了如何基于当前视口尺寸以及头部和其他固定位置元素所占用的空间来设定各个标签页的最大允许显示范围[^1]。 #### HTML结构示例 确保HTML部分按照预期构建好相应的DOM树形结构，以便于样式和脚本逻辑正常工作。 ```html <div class="main-wrapper"> <div class="tabs-container"> <!-- 其他顶部固定的组件 --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> </el-tabs> <!-- 底部或其他浮动的内容 --> </div> </div> ``` 此方案不仅适用于简单的单层嵌套场景，也可以扩展至更复杂的多层级界面设计中去。需要注意的是，当涉及到多个滚动条共存的情况时（比如既有水平又有垂直方向上的溢出），则需进一步优化算法以确保用户体验的一致性和流畅性[^2]。