网站建设与维护教程祁阳网站设计

背景

在使用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";}