【6 ElementUI Tabs控件第二个tab页签Div宽度缩小的问题】

代码写到35岁2023-09-20 21:55

背景

在使用ElementUI的Tabs 控件时，发现第二个tabs 内容的Div宽度用的百分比，然后就会缩小，导致内容变形，这边的处理方法就是拿到一个tabs 内容的div的offsetWidth，然后将这个width赋值给第二个Div的width即可。

代码

html 复制代码

  <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>

javascript 复制代码

 // 组件加载完
  async mounted() {
    // 设置tab 两个div的宽度
    var widthValue = document.getElementById("chartlRight").offsetWidth;
    document.getElementById("divUserTopDesc").style.width = widthValue + "px";
    document.getElementById("divPageTopDesc").style.width = widthValue + "px";
    }