Vue 2中如何判断HTML是否已完全加载？

你的核心问题在于：Vue的DOM更新是异步执行的，你在调用$forceUpdate()后立刻通过finally隐藏加载模态框，但此时表格的DOM还没真正渲染完成，分页组件处于未就绪状态，所以会出现几秒内无法操作的冻结情况。

判断DOM完全加载的方法 & 解决方案： #

• 用Vue的$nextTick()等待DOM更新完成
  Vue修改数据后，不会立刻更新DOM，而是将所有数据更新任务攒到一个事件循环中批量处理。$nextTick()的回调函数会在DOM完全更新完成后执行，这时再隐藏模态框，就能确保表格和分页组件都已渲染就绪。

修改你的代码，把隐藏模态框的逻辑移到$nextTick()内：

get_products_by_page(page_go_to){
    document.getElementById('modal-loading').style.display = 'block';
    axios.post('/intranet2/pedidos/search_data_product_stock_v2', {
        id_products: this.id_products[page_go_to], id_supplier_selected: this.id_supplier_selected, range_min: this.range_min, range_max: this.range_max
    }).then(function(response) {

        if(response.data.length != 0){
            this.current_page   = page_go_to;
            this.data_products  = response.data;

            // 触发更新后，用$nextTick等待DOM渲染完成
            this.$nextTick(() => {
                try {
                    for (var i = 0; i < this.data_products.length; i++) {
                        document.getElementById('row'+this.data_products[i].id_product).style.backgroundColor='#FFFFFF';
                    }
                } catch (error) {
                  //console.error(error);
                }
                // DOM就绪后再隐藏模态框
                document.getElementById('modal-loading').style.display = 'none';
            });
            
        }else{
            this.data_products = [];
            this.number_pages   = 0;
            this.total_products = 0;

            $.notify('Sin resultados.', 'info');
            // 无数据时直接隐藏模态框
            document.getElementById('modal-loading').style.display = 'none';
        }

    }.bind(this), function(response) {
        $.notify('Error al buscar productos.');
        document.getElementById('modal-loading').style.display = 'none';
    });
},

• 替换手动DOM操作（可选但推荐）
  你代码里手动修改行背景色的逻辑，可改用Vue的动态样式绑定实现，避免直接操作DOM，也能减少DOM未就绪的报错：
  在表格行标签中添加动态样式绑定：

<tr :id="'row' + item.id_product" :style="{ backgroundColor: '#FFFFFF' }">

这样无需在JS里循环查找DOM元素，Vue会自动处理样式，也不会出现找不到DOM的情况。

• 分页组件的适配（若有需要）
  如果分页组件是第三方库或自定义组件，确保它监听了data_products或current_page的变化，在数据更新后重新初始化；如果是自研的分页逻辑，也要把分页按钮的事件绑定放在$nextTick()之后，确保DOM元素已存在。

内容的提问来源于stack exchange，提问作者Michu