elementUI使用el-tabs时有个坑

最近做的问卷调查系统中用到了tabs标签页,导致了一个很奇葩的大坑,来回收缩改变页面大小时,甚至访问进来页面就 直接导致浏览器卡死崩溃...

解决方案1 :  使用el-row el-col元素来包裹el-tabs元素,也可以解决页面卡死问题

 

    <el-row>
      <el-col :span="24">
        <el-tabs>
          <el-tab-pane>1111</el-tab-pane>
          <el-tab-pane>22222</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

 

解决方案2:修改el-tabs元素的最外层元素的css样式,加上display和display-direction样式属性

<tempalte>
  <div class="log-box">
    <el-tabs>
      <el-tab-pane>1111</el-tab-pane>
      <el-tab-pane>22222</el-tab-pane>
    </el-tabs>
  </div>
</template>


.log-box{
  width:100%;
  height:100%;
  
  /*加上display和display-direction样式属性就可以解决页面卡死问题*/
  display:flex;
  flex-direction:column;
}

 

posted @ 2020-08-03 14:42  CatherLee  阅读(3001)  评论(0编辑  收藏  举报