关于vue子组件的数据变了视图不更新的解决办法（转载）

Posted 2023-03-18

参考技术A 原因是因为vue不能检测data中数组的变动，

Vue.set() 响应式新增与修改数据

此时我们需要知道Vue.set()需要哪些参数，官方API：Vue.set()

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

el-table作为子组件tableHeight值变了，视图却没有更新

视图效果如下：

 

 

解决办法如下：

// 在子组件挂载完成后，采用定时器延缓计算表格高度
mounted() {
    /** 计算表格高度
        *  使用定时器来计算表格高度，避免展开/收起查询条件时表格高度不更新
        */
    let timer;
    clearInterval(timer);
    setInterval(() => {
        this.$nextTick(() => {
            this.tableHeight = this.tbHeight - 0;   // 计算表格高度
        });
    }, 1);
}