脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → element-ui 对话框dialog使用echarts报错

element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

 更新时间：2022年11月18日 09:41:49   作者：masternvshi  
这篇文章主要介绍了element-ui 对话框dialog里使用echarts，报错'dom没有获取到'的问题，在这个事件里边进行echarts的初始化，执行数据，本文结合实例代码给大家详细讲解,需要的朋友可以参考下
  • 给el-dialog添加@open="open()"
  • 在刚进入页面的时候对话框是关闭的，echarts不进行获取dom，当点击对话框出来的时候，有个opened事件，在这个事件里边进行echarts的初始化，执行数据；
<el-dialog
   lock-scroll
   width="80%"
   style="height:100%;"
   @opened="opens">
   <div style="display:flex;">
       <div ref="chart1"></div>
       <div ref="chart2"></div>
   </div>
</el-dialog>
methods:{
    initChart1() {
         this.chart1 = this.$echarts.init(this.$refs.chart1)
         this.chart1.setOption(this.chart1option)
     },
     initChart2() {
         this.chart2 = this.$echarts.init(this.$refs.chart2)
         this.chart2.setOption(this.chart2option)
     },
     // 进行echarts的初始化，执行数据
     opens(){
         this.$nextTick(() => {
            this.initChart1()
            this.initChart2()
         })
     }

elementUI对话框Dialog使用技巧

在我工作过程中使用Dialog对话框的需求挺多的，也积累了一下使用技巧，本篇文章用作记录使用技巧，基础操作可看elementUI官方文档：element UI官网

一、对话框禁止ESC键、点击空白区域关闭

:close-on-click-modal="false"  //禁用点击空白区域
:close-on-press-escape="false" //禁用ESC键

二、对话框body设置滚动条

给对话框设置overflow: auto;属性即可。

overflow: auto;

三、对话框表单数据初始化（清空数据）

1.resetFields()

给对话框设置close事件，绑定resetFields()数据初始化方法。

<el-dialog
  :title="visible.title"
  :visible.sync="visible.add"
  width="40%"
  @close="cancel">
  
  <el-form>
  ref="Form"
  :model="Editor"
  :rules="rules">
  </el-form>
  
</el-dialog>
cancel () {
  this.visible.add = false;
  this.$nextTick(() => {
    this.$refs.Form.resetFields();
  })
},

resetFields()方法也可以将表单验证的效果清除。

2.this.$options.data()
this.$options.data()方法重置组件Data()里的数据。

<el-dialog
  :title="visible.title"
  :visible.sync="visible.add"
  width="40%"
  @close="cancel">
  
  <el-form>
  ref="Form"
  :model="Editor"
  :rules="rules">
  </el-form>
  
</el-dialog>
cancel () {
  this.visible.add = false;
  this.Editor = this.$options.data().Editor;
},

到此这篇关于element-ui 对话框dialog里使用echarts，报错'dom没有获取到'？的文章就介绍到这了,更多相关element-ui 对话框dialog使用echarts报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论