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

问题描述

使用Element-UI中的table组件时会遇到一个常见的问题。当在el-table中调用子组件的时候会出现数据更新后&＃xff0c;子组件没有重新渲染的问题。 eg:资源列表中的健康度组件。

代码如下&＃xff1a;

{{scope.row.name}}

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

解决方法

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

{{scope.row.name}}

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

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

参考链接: