ant design +vue关于二级弹框添加echart图不显示的问题

本文分享了一位开发者在Vue项目中遇到的echarts图表渲染问题及解决方案。作者在二级弹框中尝试展示表格数据和词云echarts,但因DOM未完全渲染而失败。通过使用Vue的ref特性,成功解决了echarts图表的延迟渲染问题。

如果你执着修复一个bug并且没有思路,那就请教一下身边的人,我也希望好好努力,去寻找一个志同道合的团队。
在这里插入图片描述
效果是这样,二级弹框中点击查看结果,出现表格数据和词云echarts,可是我怎么都出现不了,刚开始报错
在这里插入图片描述
就是用js用获取绘制的echarts图时,获取的id是html的dom没有渲染,所以解析不出来。因为在二级弹框里,所以刚开始加载页面的时候,弹框也没有打开,就找不到弹框相应的id,所以渲染出错。
结果搜索结果需要用
定时器请求 settimeout(() => {this.函数名},1000)
或者this.$nextTick(()=> { this.函数名 })

结果我尝试使用发现页面不报错。
在这里插入图片描述
但是在弹框中添加还是不出现,不报错也不出现,郁闷。
尝试写在页面中
在这里插入图片描述
页面中显示,奇了个怪。最后我的老师说你用ref试试。(敲黑板画重点了)
在vue中,不需要获取dom节点,元素绑定ref之后,直接通过this.refs去进行调用。ref用来给元素注册信息,注册的信息会在父元素的refs去进行调用。ref用来给元素注册信息,注册的信息会在父元素的refsrefrefs上。
恍然大悟啊,看来学海无涯苦作舟。
我是怎么解决的呢?Show you my code
在这里插入图片描述
绑定ref
然后
在这里插入图片描述
引入ref的信息。

短短两行代码,痛彻心扉啊。
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值