Vue Cannot read properties of null (reading '$el') 错误，找出真凶了

Cannot read properties of null (reading '$el')

菜鸟，在vue3 开发遇到的问题，百思不得其解，为什么会为null，先上代码大概的代码结构：

<template>
    <el-Dialog v-model="isLoading">
        <el-table ref="tableRef">
            <el-table-column prop="name"/>
        </el-table>
    </el-dialog>
</template>
<script steup>
    //省略...import
    const isLoading= ref(false);
    const tableRef = ref(null);
     
    const openDialog = asnyc (row: any) =>{
        //省略...加载数据,其他处理
        consolog.log(tableRef.value);   //此处会输出null
        const elment = tableRef.value.$el;
         
        isLoading.value = true;
    };
</script>   

　　调试了很久，怎么会为null, 明明已经检查了tableRef已经声明并正确设置ref，初始化都没问题。如果说DOM没有渲染完毕，尝试在

onMounted里面输出正常是可以，因为它已经渲染完了，结果还是null, 上网找到一种方式说await nextTick()可以等待DOM渲染完毕,也是不行。

最终调度发现是由于这里的影响，由于上级的el-dialog 未设置为显示（渲染），所以子节点里面都不会被渲染。

1	`isLoading.value = true;`

　　修正后：, 这行代码显示isLoading.value = true;放在它前面即可。

const openDialog = asnyc (row: any) =>{
        //省略...加载数据,其他处理
isLoading.value = true;
        consolog.log(tableRef.value);   //此处会输出ok
        const elment = tableRef.value.$el;
         
         
    };
</script> 