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

时间:2022-11-22 masternvshi 人气:0

给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;
},

加载全部内容