el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom.

最新推荐文章于 2024-07-23 09:38:47 发布
最新推荐文章于 2024-07-23 09:38:47 发布
阅读量4.8k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/harry034/article/details/80454142
版权
本文解决了在使用Element UI的el_dialog组件时遇到的Echart图表初始化失败的问题。当el_dialog打开时，由于DOM元素尚未完全渲染，直接使用Echart初始化会报错。通过使用Vue的$nextTick方法，可以确保DOM更新后再进行图表初始化，从而避免错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId("元素Id")获取不到元素，导致echart.init报Error: Initialize failed: invalid dom.

解决方法：

可以使用vm.$nextTick([callback]);

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。


harry034
关注
当Element UI里面el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom
迎接_成
01-22 2924
是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId(“元素Id”)或者refs获取不到元素，导致echart.init报Error:Initializefailed:invaliddom.解决方法：1.可以使用‘vm.refs获取不到元素，导致echart.init报Error: Initialize failed: invalid dom....
【ZeyFraのWeb开发经验03】关于在Element UI的el-dialog组件中使用echarts产生Cannot read property ‘getAttribute‘ of null
ZeyFraの博客
03-07 521
关于在Element UI的el-dialog组件中使用echarts的问题 问题描述： "Cannot read property 'getAttribute' of null" "ECharts Can't get dom width or height!" "Initialize failed: invalid dom" 原因： 当我们打开el-dialog时，dom元素是还没有渲染完成的 解决： // 使用setTimeout定时间器 open(){ this.dialogVisibl
Vue 中 nextTick 原理和应用场景
zRanStady的博客
03-14 7957
在 Vue 官方文档中，nextTick 是这么说明的： 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 原理 1.异步执行 Vue实现响应式并不是数据发生变化之后 DOM 就立即变化，而是按照一定策略进行 DOM 的更新。其实在Vue的文档中，不难发现Vue是异步执行 DOM 更新。 异步执行的机制简单来说就是： 1、首先所有的同步任何肯定是在主线程上执行的，即执行栈； 2、除了主线程，还一个任务队列task queue，只要异步任务有了运
$nextTick
weixin_48995066的博客
05-05 92
使用场景： this.$ nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$ nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$ nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数
高德地图Error: Invalid Object: LngLat(NaN, NaN)报错
weixin_54231578的博客
07-23 749
这个报错一开始出现的莫名奇妙，不清楚哪里触发的，找了解决答案，很多都是设置高度就能解决问题。结果无效（有些页面应该可以解决），后来同事也有类似问题，说滚动就会报错（），其他页面数据过多，出现滚动条就会报错。设置绝对定位，终于解决了。
CATIA CAA This module has an invalid BUILT_OBJECT_TYPE [].
最新发布
04-01
LogError("Failed to initialize dialog resources."); return FALSE; } } ``` #### 4. **持久化窗口位置数据** 虽然原文提到尚不清楚如何存储上一次关闭后的对话框坐标信息，但实际上可以通过读写 INI 文件或...
ap6212a0_a33_sc3817r_服务器验证通过_bt已经通了_wifi需要修改配置_需要再次验证_20170626_1549.7z
06-26
# device/softwinner/polaris-common/rild/init.3gdongle.rc:root/init.sunxi.3gdongle.rc # 3G Data Card usb modeswitch File #PRODUCT_COPY_FILES += \ # $(call find-copy-subdir-files,*,device/softwinner/...
Vue $nextTick 使用场景
zero_person_xianzi的博客
04-28 1538
前言 虽然 $ nextTick是一个中级知识点。但只要你是一个vue开发者，你就必须得知道$nextTick的使用场景。不管是面试还是日常工作，你都用得到。 $nextTick的定义 $nextTick会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.ne...
vue中$nextTick()作用
H-L的博客
05-30 816
vue更新数据是异步的1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了$nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染什么是Vue.nextTick()官方文档解释如下：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。...
Vue.js中this.$nextTick()的使用
weixin_45932157的博客
04-21 336
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看 <template> <section>
$nextTick函数
qq_42445532的博客
01-04 348
在加载父子组件模板过程中，一开始虽然没有数据渲染dom元素，但是父子组件的代码都是会执行，即使一开始子组件中并没有数据。当用户第一次点击表格中的某条数据，子组件通过父组件表格中某条数据的id请求到详情数据。那当用户想获取另外一条数据的详情数据时，上一个请求数据的方法还没有执行完成，即用户点击第二条数据的详情数据时，上一条数据的id和详情信息数据请求还没有完全请求结束，这样的话显示的还是上一条信息，...
$nextTick()
weixin_50736511的博客
07-20 136
官方文档对 nextTick 的功能如下说明： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 与update生命周期用法类似，在数据加载完成后并且dom渲染完成自动调用此函数 ...
多个el-dialog嵌套后 .el-dialog_body样式如何根据不同el-dialog区分设置
05-19
可以通过给每个 `el-dialog` 组件添加一个不同的 `class`，然后使用该 `class` 来区分设置不同的样式。 例如，假设你有两个 `el-dialog` 组件，一个是 `dialog-1`，另一个是 `dialog-2`，你可以给它们分别加上不同的 `class`： ```html <el-dialog class="dialog-1"> ... </el-dialog> <el-dialog class="dialog-2"> ... </el-dialog> ``` 然后在 CSS 中，你可以通过选择器来对不同的 `el-dialog` 组件进行不同的样式设置： ```css .dialog-1 .el-dialog__body { /* 设置 dialog-1 中 el-dialog__body 的样式 */ } .dialog-2 .el-dialog__body { /* 设置 dialog-2 中 el-dialog__body 的样式 */ } ``` 这样就可以根据不同的 `class` 区分设置不同的样式了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值