1.首先,echarts点击事件一般写法为:
myChart.on("click", function (params){
console.log(params); //柱状图点击事件
this.dialogVisibleA = true;
});
这种写法的问题在于点击事件用的是funtion,因为用了funtion后事件里的this指向就不是原来的指向了,所以即便this.dialogVisibleA的输出结果是true也不会触发打开弹窗
2.解决方案:
首先在el-dialog弹出框上加上append-to-body,然后将function改为=>写法
<el-dialog
title=""
:visible.sync="dialogVisibleA"
append-to-body
@close="closeDialog"
class="class_dialog_hospital"
>
myChart.on("click", (params) => {
console.log(params); //柱状图点击事件
this.dialogVisibleA = true;
});
(还有另一种解决方案,就是在定义that=this,也可解决)
文章讨论了在使用Echarts时遇到的点击事件函数中this指向问题,当使用function定义事件处理函数时,this不再指向预期对象,导致无法正确控制弹窗显示。解决方案包括将function改为箭头函数或在外层保存this引用。通过在el-dialog组件上添加append-to-body属性和使用箭头函数,可以成功更新dialogVisibleA并触发弹窗显示。
&spm=1001.2101.3001.5002&articleId=131528366&d=1&t=3&u=b8c0c04eee794806889016ed2f4c9282)
8561

被折叠的 条评论
为什么被折叠?



