vue项目中使用elementUI的el-tabs组件跳转卡死问题

解决方案1：在页面上使用了el-tabs元素的页面（log.vue），使用el-row el-col元素来包裹el-tabs元素，也可以解决页面卡死问题<tempalte><div class="log-box"><el-row><el-col :span="24"><el-tabs><el-tab-pane>1111<

黎轩栀海

3052人浏览 · 2021-10-11 19:34:35

黎轩栀海 · 2021-10-11 19:34:35 发布

解决方案1：在页面上使用了el-tabs元素的页面（log.vue），使用el-row el-col元素来包裹el-tabs元素，也可以解决页面卡死问题

<tempalte>
  <div class="log-box">
    <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>
  </div>
</template>

解决方案2：在el-tabs标签上面，加一个兄弟节点–空的块级元素

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

此块级元素，要占位dom内容，但不设置宽高，即不影响页面为主；

解决方案3：
降级elementUI版本到2.6.3；
或者升级vue版本到2.6x+

解决方案4：

vue(2.5.2)版本过低时 elment版本过高，会出现这个问题

解决方案：

终端输入 npm audit fix 命令执行即可

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^