在用Vue.JS进行开发的时候为了方便选择了ElementUI框架，使用了其中的Tabs 标签页控件，但是默认的标签页内容是无限撑大，不符合我的要求，我想让其定高，然后overflow:scroll；找了半天element官方文档，没找到有效的参数。最后决定自己修改样式，查看dom元素的层级关系，发现选项卡最后被渲染成了如下的结构：
选项卡层级关系.png
于是在vue的css部分添加代码：
<style scoped>
.container-tab .el-tabs__content{
flex-grow: 1;
overflow-y: scroll;
}
</style>
但是运行后并没有作用，于是查找VueJS官方文档，发现由于编译的原因，scoped中的样式可能会因为层级问题导致无法生效，为此Vue为其增加了深度选择器的概念，文档地址如下：
https://link.zhihu.com/?target=https%3A//vue-loader.vuejs.org/zh-cn/features/scoped-css.html
根据文档修改后成功解决，代码如下：
<style scoped>
.container-tab >>> .el-tabs__content{
flex-grow: 1;
overflow-y: scroll;
}
</style>
效果图：
选项卡内容滚动效果.png
网友评论