背景
在使用ElementUI的Tabs 控件时,发现第二个tabs 内容的Div宽度用的百分比,然后就会缩小,导致内容变形,这边的处理方法就是拿到一个tabs 内容的div的offsetWidth,然后将这个width赋值给第二个Div的width即可。
代码
<el-tabs v-model="leftActiveName" type="card"><el-tab-pane label="红榜-菜单" name="first" style="width: 100%"><div id="divPageTopAsc" style="width: 100%; height: 40vh"></div></el-tab-pane><el-tab-pane label="黑榜-菜单" name="second" style="width: 100%"><div id="divPageTopDesc" style="width: 100%; height: 40vh"></div></el-tab-pane></el-tabs>
// 组件加载完async mounted() {// 设置tab 两个div的宽度var widthValue = document.getElementById("chartlRight").offsetWidth;document.getElementById("divUserTopDesc").style.width = widthValue + "px";document.getElementById("divPageTopDesc").style.width = widthValue + "px";}