vue 组件第一次不渲染问题_解决Vue循环中子组件不实时更新的问题

问题描述

使用Element-UI中的table组件时会遇到一个常见的问题。当在el-table中调用子组件的时候会出现数据更新后，子组件没有重新渲染的问题。

eg:资源列表中的健康度组件。

代码如下：

{{scope.row.name}}

理论上当我更新数据的时候，sourceData的值已经发生了改变(而不是其中的某个字段发生了改变)，子组件应该获取的数据更新并重新渲染。实际上该页面的健康度组件只会保留第一次界面初始化的渲染页面。

解决方法

这是Element-UI的一个bug，解决方案是从el-table中增加一个row-key属性，并为row-key设置一个能唯一标识的字段名。假如你的数据中能够唯一标识的字段是id，那你就设置为id。这样就解决了这种问题。

eg:代码如下

{{scope.row.name}}

还有一个解决方法是给table增加一个随机数的key

但是在chrome上会出现页面卡死，内存占用过高的问题。不建议使用

参考链接: