element-ui 中 el-popover 组件嵌套表格，如何使表格数据动态刷新？

Question

简化描述如下。

组件代码：

<el-table :data="tableData">
    <el-table-column>
        <template slot-scope="scope">
            <el-popover ref="myPopover" trigger="click">
                <el-table :data="scope.row.name">
                    <el-table-column prop="firstName" label="firstName"></el-table-column>
                    <el-table-column prop="lastName" label="lastName"></el-table-column>
                </el-table>
            </el-popover>
            <el-button v-popover:myPopover>查看</el-button>
        </template>
    </el-table-column>
</el-table>

如上，主页面有一个el-table，页面加载时，通过自定义的this.getData()函数从后台数据库获取到tableData数据，其结构：

tableData: [
    {name: [{firstName: 'Nick', lastName: 'Young'}], age:22},
    {name: [{firstName: 'Allen', lastName: 'Zhang'}], age:23}
]

当点击查看按钮时，能够正常显示el-popover中嵌入的表格数据。

---

另外有一个editData()函数，它的功能是：向后台发送put请求，修改数据库中的一条数据，比如将
{name: [{firstName: 'Allen', lastName: 'Zhang'}], age:23}
修改为：
{name: [{firstName: 'Jack', lastName: 'Ma'}], age:18},
然后调用this.getData()函数刷新当前tableData数据。

现在问题来了。实际中，当执行this.editData()函数后，点击查看按钮，并不会显示el-popover中的表格数据；但是当刷新当前页面后，就能够正常显示出来。

---

目前找了一个比较笨的解决方法：在editData()函数的最后使用this.$router.push刷新当前页面，弊端是页面有较为明显的刷新动效，体验不佳。

请问各位碰到过类似问题么？有啥比较好的解决方法没？

Answer 1

在数组或者对象中，通过id或者其它标志找到你要更新的数据，通过this.$set(this.someObject,'b',2)更新数据。
关于数组，对象有不同的更新方法，详情参见：https://cn.vuejs.org/v2/guide...

Answer 2

没更新的话应该是你的table中的数值没更新成功,
tableData.push('a');
tableData.pop('a');
从而促使table中的数值更新成功，就可以了

Answer 3

element-ui中的table是数据驱动视图，只要数据是响应式，那么视图就会响应式渲染。但是vue响应式的数组方法只有以下几种：
1、push方法 向数组的末尾添加一个或多个元素，并返回新的长度
2、pop() 方法用于删除并返回数组的最后一个元素。
3、shift() 方法用于删除数组的第一个元素，并返回第一个元素的值
4、unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
5、splice() 方法向/从数组中删除元素/插入元素/替换元素，然后返回被删除/插入/替换的项目。
6、sort() 方法用于对数组的元素进行排序
7、reverse() 方法用于颠倒数组中元素的顺序

除此之外还有几个vue方法
this.$set()
this.$delete()
只有用这些方法处理数组才是响应式。