快捷導(dǎo)航

element-ui?對(duì)話(huà)框dialog使用echarts報(bào)錯(cuò)'dom沒(méi)有獲取到'的問(wèn)題

更新時(shí)間：2022年11月18日 09:41:49 作者：masternvshi

這篇文章主要介紹了element-ui?對(duì)話(huà)框dialog里使用echarts，報(bào)錯(cuò)'dom沒(méi)有獲取到'的問(wèn)題，在這個(gè)事件里邊進(jìn)行echarts的初始化，執(zhí)行數(shù)據(jù)，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下

給el-dialog添加@open="open()"
在剛進(jìn)入頁(yè)面的時(shí)候?qū)υ?huà)框是關(guān)閉的，echarts不進(jìn)行獲取dom，當(dāng)點(diǎn)擊對(duì)話(huà)框出來(lái)的時(shí)候，有個(gè)opened事件，在這個(gè)事件里邊進(jìn)行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)
     },
     // 進(jìn)行echarts的初始化，執(zhí)行數(shù)據(jù)
     opens(){
         this.$nextTick(() => {
            this.initChart1()
            this.initChart2()
         })
     }

elementUI對(duì)話(huà)框Dialog使用技巧

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

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

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

二、對(duì)話(huà)框body設(shè)置滾動(dòng)條

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

overflow: auto;

三、對(duì)話(huà)框表單數(shù)據(jù)初始化（清空數(shù)據(jù)）

1.resetFields()

給對(duì)話(huà)框設(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()方法也可以將表單驗(yàn)證的效果清除。

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 對(duì)話(huà)框dialog里使用echarts，報(bào)錯(cuò)'dom沒(méi)有獲取到'？的文章就介紹到這了,更多相關(guān)element-ui 對(duì)話(huà)框dialog使用echarts報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: