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

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

原文：https://www.cnblogs.com/rever/p/10565042.html