如标题所示错误,直译是key为undefined。本次是因为使用了element-ui中的el-table组件所以并不是key为undefined,而是后台返回的key有重复。

当key重复就会出现页面卡死的现象,渲染就会失败。

key在使用时我们要注意:

1.在渲染时该识别为不同时,识别为相同

2.在渲染时该识别为相同,却识别为了不同

解决问题如下:

  getRowKey(row) {
  /** 检查row.id是否有重复的缓存对象 */
  if (!this.checkRepeatObj) {
    this.checkRepeatObj = {}
  }
  if (row) {
    if (row.id) {
      if (this.checkRepeatObj[row.id]) {
        if (!row._secondId) {
          row._secondId = Math.random() + ''
        }
        /** 方便根据key重用元素 */
        return row._secondId
      } else {
        this.checkRepeatObj[row.id] = 1
        return row.id
      }
    }
    console.log('row.id为空')
    if (!row._secondId) {
      row._secondId = Math.random() + ''
    }
    return row._secondId
  } else {
    console.log('row为空')
    return Math.random() + ''
  }
}

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。