欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui?對話框dialog使用echarts報錯'dom沒有獲取到'的問題

 更新時間:2022年11月18日 09:41:49   作者:masternvshi  
這篇文章主要介紹了element-ui?對話框dialog里使用echarts,報錯'dom沒有獲取到'的問題,在這個事件里邊進行echarts的初始化,執(zhí)行數(shù)據(jù),本文結(jié)合實例代碼給大家詳細講解,需要的朋友可以參考下
  • 給el-dialog添加@open="open()"
  • 在剛進入頁面的時候?qū)υ捒蚴顷P(guān)閉的,echarts不進行獲取dom,當(dāng)點擊對話框出來的時候,有個opened事件,在這個事件里邊進行echarts的初始化,執(zhí)行數(shù)據(jù);
<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的初始化,執(zhí)行數(shù)據(jù)
     opens(){
         this.$nextTick(() => {
            this.initChart1()
            this.initChart2()
         })
     }

elementUI對話框Dialog使用技巧

在我工作過程中使用Dialog對話框的需求挺多的,也積累了一下使用技巧,本篇文章用作記錄使用技巧,基礎(chǔ)操作可看elementUI官方文檔:element UI官網(wǎng)

一、對話框禁止ESC鍵、點擊空白區(qū)域關(guān)閉

:close-on-click-modal="false"  //禁用點擊空白區(qū)域
:close-on-press-escape="false" //禁用ESC鍵

二、對話框body設(shè)置滾動條

給對話框設(shè)置overflow: auto;屬性即可。

overflow: auto;

三、對話框表單數(shù)據(jù)初始化(清空數(shù)據(jù))

1.resetFields()

給對話框設(shè)置close事件,綁定resetFields()數(shù)據(jù)初始化方法。

<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()里的數(shù)據(jù)。

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

到此這篇關(guān)于element-ui 對話框dialog里使用echarts,報錯'dom沒有獲取到'?的文章就介紹到這了,更多相關(guān)element-ui 對話框dialog使用echarts報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論