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

背景

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

你可能感兴趣的:(elementui,前端,javascript)