解决Vue循环中子组件不实时更新的问题

问题描述

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

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



代码如下：

	<el-table :data="sourceData" class="resource_list_data" v-loading="loading" size="mini" :default-sort="{prop: 'update_time', order: 'descending'}" @sort-change="handleSortChange">
			<el-table-column prop="name" label="资源名称">
				<template slot-scope="scope">
					<el-tooltip effect="dark" :openDelay="500" :content="`点击进入${scope.row.name}管理页面`" placement="top">
						<a @click="manageClick(scope.row.id)"> {{scope.row.name}}</a>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="res_type_name" label="资源类别">
			</el-table-column>
			<el-table-column prop="ip" label="IP">
			</el-table-column>
			<el-table-column prop="probe_name" label="采集器" :formatter="probeFormatter">
			</el-table-column>
			<el-table-column prop="desc_" label="描述" :formatter="descriptionFormatter">
			</el-table-column>
			<el-table-column prop="health_degree" label="健康度">
				<template slot-scope="scope">
					<HealthDegree :degree="scope.row.health_degree"></HealthDegree>
				</template>
			</el-table-column>
			<el-table-column prop="update_time" label="更新时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<BlueButton title="管理" @click.native="manageClick(scope.row.id)" />
					<RedButton title="删除" @click.native="ruleDelete(scope.row)" />
				</template>
			</el-table-column>
		</el-table>

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

解决方法

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

eg:代码如下

	<el-table :data="sourceData" class="resource_list_data" row-key="id" v-loading="loading" size="mini" :default-sort="{prop: 'update_time', order: 'descending'}" @sort-change="handleSortChange">
			<el-table-column prop="name" label="资源名称">
				<template slot-scope="scope">
					<el-tooltip effect="dark" :openDelay="500" :content="`点击进入${scope.row.name}管理页面`" placement="top">
						<a @click="manageClick(scope.row.id)"> {{scope.row.name}}</a>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="res_type_name" label="资源类别">
			</el-table-column>
			<el-table-column prop="ip" label="IP">
			</el-table-column>
			<el-table-column prop="probe_name" label="采集器" :formatter="probeFormatter">
			</el-table-column>
			<el-table-column prop="desc_" label="描述" :formatter="descriptionFormatter">
			</el-table-column>
			<el-table-column prop="health_degree" label="健康度">
				<template slot-scope="scope">
					<HealthDegree :degree="scope.row.health_degree"></HealthDegree>
				</template>
			</el-table-column>
			<el-table-column prop="update_time" label="更新时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<BlueButton title="管理" @click.native="manageClick(scope.row.id)" />
					<RedButton title="删除" @click.native="ruleDelete(scope.row)" />
				</template>
			</el-table-column>
		</el-table>

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

<el-table :key="Math.random()" ></el-table>

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

参考链接:

vue数据更新了，视图没有更新

vue组件库element-ui 的Table内容显示不更新

element-ui中table-column中template下元素不更新