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

简化描述如下。

组件代码:

<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刷新当前页面,弊端是页面有较为明显的刷新动效,体验不佳。

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

回答:

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

回答:

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

回答:

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注