SoFunction
Updated on 2025-04-11

The issue of using echarts to report an error 'dom not obtained' in element-ui dialog box dialog

  • Add @open="open()" to el-dialog
  • When you first enter the page, the dialog box is closed, and echarts does not obtain the dom. When the dialog box is clicked, there is an opened event, which initializes echarts and executes data in this event;
<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.$(this.$refs.chart1)
         this.(this.chart1option)
     },
     initChart2() {
         this.chart2 = this.$(this.$refs.chart2)
         this.(this.chart2option)
     },
     // Initialize echarts and execute data     opens(){
         this.$nextTick(() =&gt; {
            this.initChart1()
            this.initChart2()
         })
     }

Tips for using the elementUI dialog box Dialog

There are many needs to use Dialog dialog boxes during my work, and I have accumulated some usage skills. This article is used as a record usage skills. For basic operations, please refer to the official document of elementUI:element UI official website

1. The dialog box prohibits ESC key and clicks on the blank area to close

:close-on-click-modal="false" //Disable click-on blank area
:close-on-press-escape="false" //Disable the ESC key

2. Set the scrollbar on the dialog box body

Just set the overflow: auto; attribute to the dialog box.

overflow: auto;

3. Dialog form data initialization (clear data)

()

Set the close event for the dialog box and bind the resetFields() data initialization method.

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

The resetFields() method can also clear the effect of form verification.

.$()
This.$() method resets the data in component Data().

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

Here is the article about using echarts in the dialog dialog box. The error 'dom was not obtained'? That’s all for the article. For more related element-ui dialog dialog, please search for my previous article or continue browsing the related articles below. I hope you support me in the future!