javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > element-ui 对话框dialog使用echarts报错

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

作者:masternvshi

这篇文章主要介绍了element-ui 对话框dialog里使用echarts,报错'dom没有获取到'的问题,在这个事件里边进行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报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文