Skip to content

antd渲染echarts图表,打开Modal框时无法获取里面的dom节点

场景

封装通用弹窗组件,放大echarts图表

问题

解决Vue3.0使用antd时,打开Modal框时无法获取里面的dom节点

在打开模态框的方法里面,获取dom节点然后innerHTML,比如

js
showModal() {
    this.dialog = true;        
	document.getElementById("info") 
},

报错document.getElementById(“info”)找不到

解决方法:Modal中有forceRender属性强制渲染Modal

html
<a-modal v-model:visible="fxModel" :forceRender="true" @ok="fxFunHandleOk" title="查看" width="900px" >

问题:因为我用到的模态框不止一处,所以我需要关闭时销毁 Modal 里的子元素,又用了:destroyOnClose="true"属性,这样一来就冲突了,我还是获取不到 document.getElementById(“info”)

最终解决方法:加destroyOnClose属性+nextTick方法

html
<a-modal v-model:visible="fxModel" :destroyOnClose="true" @ok="fxFunHandleOk" title="查看" width="900px" >
jsx
showModalList() {
    this.dialog = true;      
    nextTick(() => {
		document.getElementById("info")
		//根据id渲染eachats     
	});  
},