element-ui使用el-tabs组件的时候浏览器直接卡死的问题

前端小白de窝
  • 394

我在使用element-ui的时候,使用了el-tabs组件,在单独的vue文件里写入没问题。但是从别的页面跳进去,走路由就会卡死,浏览器直接卡死了,不知道为什么?
代码如下:

  1. A.vue:点这个页面会执行跳转
    this.$router.push('/erp/bd/attendanceDetail')

  2. B.vue:这个页面什么都没有,就把element-ui的官方文档里的例子粘贴进去了,直接就浏览器卡死了

<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>
<script>
  export default {
    data() {
      return {
        activeName2: 'first'
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>
<style scoped>

</style>

跪求大神帮忙解决,搞了一天了都

回复
阅读 11.7k
9 个回答
啦啦啦
  • 3
新手上路,请多包涵

我也遇到了相同的问题,我找到的原因是因为没有套入class="el-col el-col-24" 导致卡死,不知道是不是所有人问题的出处。

海芋
  • 2
新手上路,请多包涵

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

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

目前加el-row el-col 和 固定高度也解决不了

baijingmsn
  • 2
新手上路,请多包涵

我也遇到这个问题了,我这边是把路由重新设置了下,解决了

我今天早上也遇到这个问题了,我是为一个表格做标签选项的时候,没注意把它放在了页面低端,然后一开页面就卡死,想了一会儿,更新了一下element-ui的最新版本,把它放到表格上边,就正常了,具体原理不清楚,小白一个,作为参考吧。

我是给el-tabs一个固定宽度,就解决了,不知道是不是一样的问题

LKen
  • 5
新手上路,请多包涵

感谢楼上“海芋”和“LKen”的答案,帮助很大,用<el-tabs>出现浏览器阻塞问题是因为项目vue版本过低elment版本过高,降级即可解决问题。
Similar Trouble: "vue": "^2.3.4", "element-ui": "^2.9.1", block when using
when make "element-ui": "^2.9.1" low to "element-ui": "^2.1.0", it works!
cnpm uninstall element-ui
cnpm i element-ui@2.1.0
you can look this url may helps: https://github.com/ElemeFE/el...
用户管理
改为
el-tab-pane元素内不能有内容

如果想要有内容则将elment-ui版本降级至2.1.0则就没有问题了(别的低于2.9.1的我没试过)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏