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

Posted 2023-05-13

参考技术A vue前端开发，经常遇到key为undefine的bug，如图

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

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

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

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

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

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

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

vue+el-table 路由跳转及返回

让table每行都可以实现跳转，给table绑定点击事件

<el-table :data="tableDataCb" style="width: 100%" @row-click="openDialog">
              <el-table-column
                  prop="W_NAME"
                  label="名称"
                  align="center"
              ></el-table-column>
  </el-table>

在methods里面添加方法，此时的跳转页面需要是加载在router里面的

openDialog() {
      this.$router.push({path: ‘/EnvAnalysis/DataWindow‘})
  }

跳回上一级路由

goback() {
      this.$router.go(-1)
  }

 

  注意：$route为当前router跳转对象里面可以获取name、path、query、params等；$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

转自: https://www.cnblogs.com/keai/p/11386942.html