el-tabs展开不开加滚动

### 实现 `el-tabs` 展开后带有滚动条的效果

为了使 `el-tabs` 中的内容在展开时具有滚动效果，可以采用设置固定高度并应用溢出属性的方法。具体来说，在样式部分定义 `.el-tabs__content` 及其子元素的高度，并确保这些容器能够在其内容超出设定尺寸时显示滚动条。

对于 `el-tabs` 组件内部的布局调整，可以通过自定义 CSS 来控制各个面板的高度以及它们何时应该启用滚动功能：

<style lang="scss" scoped>
.el-tabs {
    height: 100%;
    
    ::v-deep .el-tabs__content {
        /* 减去顶部标签栏占用的空间 */
        height: calc(100% - 55px);
        
        .el-tab-pane {
            height: 100%;
            overflow-y: auto;
            
            /* 隐藏默认滚动条，仅当需要时才可见 */
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
</style>

上述代码片段通过计算减去了标签头部所占空间（大约为55像素），从而保证了下方内容区域能够充分利用剩余可用空间[^4]。同时，针对 Webkit 浏览器隐藏了不必要的水平或垂直滚动条，提升了视觉体验。

另外，如果希望进一步优化用户体验，还可以考虑监听窗口大小变化事件来动态更新各组件的高度值，以适应不同设备上的显示需求。

最后需要注意的是，此方案适用于那些确实存在大量数据以至于可能超过预设视窗范围的情况；而对于简单页面，则不必强制引入额外复杂度。