解決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下元素不更新