欧美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)文章

最新評論