Cannot read properties of null (reading '$el')找出真凶

标签：el null const 渲染 read tableRef value reading

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 未设置为显示（渲染），所以子节点里面都不会被渲染。

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> 

　　经过这次知道：

1.Dom元素未被渲染时，ref.是无法取得value的

2.onMounted 执行完后，通常都是渲染完后

3.await nextTick()可以选个渲染完毕

4.当你节点设置到v-if, 或节点未设置响应属性为显示时，则子元素也不会被渲染（这点比较容易忽略）

欢迎各位大佬指点

标签：el,null,const,渲染,read,tableRef,value,reading
From： https://www.cnblogs.com/cnHeng/p/18067168