关于Vue ，key ，el-table， :row-key遇到的一个坑

vue前端开发，经常遇到key为undefine的bug，如图

image.png

其实这个情况不是key为undefine，而是一个列表里key值重复了。

很多时候 我们把后台返回的Id赋值给key,但是该死的后台返回的Id居然也有重复的时候。
这个时候会出现各种意外情况，入页面卡死，页面空白，下拉列表点不动等等错误。

特别的el-table有写特殊功能需要我们把row-key赋值，如果key重复，渲染就会失败。

为了防止key重复，我们会想当然的认为返回一个随机数字就可以了，所以会这样返回一个随机字符串
Math.random()+''；

但是这其实是有坑的，这只是解决了首次渲染的问题，但是第二次渲染时，有部分元素我们是希望他重复使用的，这样渲染效率性能更好。而且很重要的，有些情况必须这样。例如

   

       
              {{item.name}}
         
   

这个情况会导致下拉框无法下拉，因为当下拉时页面重新渲染，重新渲染又导致父元素被删除了，所以无法下拉。

key在使用时我们要注意

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

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

key重复 就是 该为不同时却识别为相同了
key一直随机，就是该识别为相同 识别为不同了

下面提供一个生成key的函数 解决Key重复，key随机问题

  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() + ''
  }
}