zoukankan      html  css  js  c++  java
  • 升级element-ui后,tabs标签页导致页面卡死 和 Duplicate keys detected: ''. This may cause an update error.

    一、升级element-ui后,tabs标签页导致页面卡死 

    1、网上查过资料(不可取):

    <el-col>
        <el-row>
            <el-tab>
         ...
         </el-tab>
       </el-row> </el-col>
    // 注:并不能生效

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">(不能插入代码</el-tab-pane>
    </el-tabs>
    // 注:这种方法可行,但是非人类,不可取

    2、研究半天资料之后的原因很简单:Vue版本太低了,element-ui升级后Vue版本不够导致的,

      本人为例,原版本:Vue是2.5.10,element-ui是2.4.11,升级后新版本:Vue升到2.6.10,element-ui升到2.13.2

     完美解决了问题。

     升级方法:yarn upgrade vue@2.5.10  (element-ui类同, 感觉yarn比gulp更快速,更规范,只需要全局安装一下yarn即可)

     注:还有一个坑需要注意,就是在打包的时候可能会报错,因为单独升级了Vue组件,其配套的依赖也需要升级

       vue-template-compiler 就是这个依赖也要升级,升到2.6.10,如果升级失败,可以先到中间版本再升级

    二、Duplicate keys detected: ''. This may cause an update error.

    原因:造成这个错误原因就是唯一标识符key出现重复了,

    1、如果是v-for循环,这个很好解决,直接有index下标序号来作为key值可以解决。

    2、如果是其他组件,如element中,table树形折叠数据 唯一标识 row-key, 这个标识可以是自定义函数,也可以遍历数据添加唯一字段作为标识

       如果还是出问题,看看你表格渲染出来的数据,是不是折叠里和外面都渲染出同一个数据,这是数结构出问题了。

       数据结构严格按照实例来,row-key可以是数字可以是字符串,子数据children(可自定义),但不允许chlidren同级对象字段中还有children字段;

       注:可以模拟最简单的数据格式来显示,看看会不会报错,再来纠正实际数据

  • 相关阅读:
    刷皇室成员
    python 2.7中matplotlib的所有版本
    Linux命令使用时路径存在空格、特殊符号
    路径名太长导致无法读取文件
    谷歌浏览器打包插件
    Upload 上载新生
    Linux的终端(base),进入base环境
    Ubuntu16.04系统语言设置为中文以及搜狗输入法的安装
    R语言3D图导出矢量图有bug
    将本地文件复制到hadoop文件系统
  • 原文地址:https://www.cnblogs.com/cp-cookie/p/13275020.html
Copyright © 2011-2022 走看看