遇到这个问题的原由是：本身自己项目的elementUI版本是2.0.11较低了，项目有个功能是自定义progress进度条颜色，无奈高版本的才有这个配置，所以就升级了elementUI，升级到了最高版本2.10.0。这样就出现问题项目中有的页面打不开并且造成浏览器窗口崩溃，于是就在卡顿的页面把代码全部清空，然后一点点复原找问题，才找到问题出现在el-tabs身上，但是不知道怎么改掉，于是就上网查资料...

<template>

  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">

    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

  </el-tabs>

</template>

直接说下别人的结果：

1. el-tab-pane元素内不能有内容

2. el-tabs 外面加上 el-row 以及 el-col

3. 给组件固定高度

但是这些在我项目中都不行后来解决方法：

由于vue(2.5.2)版本过低elment版本过高，所以才出现这个问题，只能降级了于是把elment版本降到了2.4.11，问题才解决。

参考：https://github.com/ElemeFE/element/issues/15712

element-ui使用el-tabs组件的时候浏览器直接卡死的问题的更多相关文章

  1. Element ui 上传文件组件（单文件上传） 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  2. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  3. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  4. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  5. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  6. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  7. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  8. 05 element.ui 全局配置

    element.ui css样式在组件里面改有的不会生效,是因为加了scoped.局部作用,放在这里是全局配置  

  9. element UI排坑记(一)：判断tabs组件是否切换

    之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之.然而实际解决却是相当简单的. 一.问题描述 ...

随机推荐

  1. Java容器——Set和顺序存储

    当Set使用自己创建的类型时,存储的顺序如何维护,在不同的Set实现中会有不同,而且它们对于在特定的Set中放置的元素类型也有不同的要求: Set(interface) 存入Set的每个元素都必须是唯 ...

  2. WordPress过滤器(Filters)：apply_filters和add_filter

    过滤器(Filters)对于WordPress来说是非常重要的,它极大地扩展了WordPress的定制能力,提高了WordPress的灵活性.无论是制作主题还是开发插件,我们基本上都会或多或少地使用到 ...

  3. 20道HTML基础面试题（附答案）

    以下是我整理的一些HTML的基础面试体,并自己整理了答案. 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档.DOCTYPE不存 ...

  4. C++入门经典-例2.10-控制输出精确度

    1:代码如下: // 2.10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  5. [翻译]剖析C#中的异步方法

    翻译自一篇博文,原文:Dissecting the async methods in C# 有些括号里的是译注或我自己的理解. 异步系列 剖析C#中的异步方法 扩展C#中的异步方法 C#中异步方法的性 ...

  6. MQTT协议 Websocket JS客户端

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  7. python3笔记三：运算符与表达式

    一:学习内容 算术运算符:+(加).-(减).*(乘)./(除).%(取模).**(求幂).//(取整) 赋值运算符:= 复合运算符:+=.-=.*=./=.%=.**=.//= 位运算符:& ...

  8. SQL 表 数据备份

    insert into SMTTemporarySave select * from [MSV0CIMDB].[PICS_20170706].dbo.SMTTemporarySave

  9. 环信及时通讯 Laravel 扩展包

    laravel-easemob 环信及时通讯 laravel 包开发,用于环信用户.群.聊天室等功能 github 地址   安装 加载包 "link1st/laravel-easemob& ...

  10. 【JVM】jstack和dump线程分析(2)

    一:jstack jstack命令的语法格式: jstack  <pid>.可以用jps查看java进程id.这里要注意的是:1. 不同的 JAVA虚机的线程 DUMP的创建方法和文件格式 ...