element-ui?對(duì)話框dialog使用echarts報(bào)錯(cuò)'dom沒有獲取到'的問題
- 給el-dialog添加@open="open()"
- 在剛進(jìn)入頁面的時(shí)候?qū)υ捒蚴顷P(guān)閉的,echarts不進(jìn)行獲取dom,當(dāng)點(diǎn)擊對(duì)話框出來的時(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ì)話框Dialog使用技巧
在我工作過程中使用Dialog對(duì)話框的需求挺多的,也積累了一下使用技巧,本篇文章用作記錄使用技巧,基礎(chǔ)操作可看elementUI官方文檔:element UI官網(wǎng)
一、對(duì)話框禁止ESC鍵、點(diǎn)擊空白區(qū)域關(guān)閉
:close-on-click-modal="false" //禁用點(diǎn)擊空白區(qū)域
:close-on-press-escape="false" //禁用ESC鍵
二、對(duì)話框body設(shè)置滾動(dòng)條
給對(duì)話框設(shè)置overflow: auto;屬性即可。
overflow: auto;
三、對(duì)話框表單數(shù)據(jù)初始化(清空數(shù)據(jù))
1.resetFields()
給對(duì)話框設(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ì)話框dialog里使用echarts,報(bào)錯(cuò)'dom沒有獲取到'?的文章就介紹到這了,更多相關(guān)element-ui 對(duì)話框dialog使用echarts報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信JS SDK接入的幾點(diǎn)注意事項(xiàng)(必看篇)
下面小編就為大家?guī)硪黄⑿臞S SDK接入的幾點(diǎn)注意事項(xiàng)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06js取兩個(gè)數(shù)組的交集|差集|并集|補(bǔ)集|去重示例代碼
求兩個(gè)集合的補(bǔ)集、交集、差集、并集等等在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到,下面與大家分享下具體的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫漸變效果)
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出一個(gè)DIV框的實(shí)現(xiàn)方法,帶緩沖漸變動(dòng)畫效果,涉及鼠標(biāo)事件的響應(yīng)及結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)形成動(dòng)畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2016-03-03uniapp實(shí)現(xiàn)全局設(shè)置字體大小(小中大的字體切換)
隨著UniApp的流行,越來越多的開發(fā)者選擇使用它來構(gòu)建跨平臺(tái)應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)全局設(shè)置字體大小(小中大的字體切換)的相關(guān)資料,需要的朋友可以參考下2023-06-06JS驗(yàn)證輸入的是否是數(shù)字及保留幾位小數(shù)問題
這篇文章主要介紹了JS驗(yàn)證輸入的是否是數(shù)字及保留幾位小數(shù)問題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05IE7中javascript操作CheckBox的checked=true不打勾的解決方法
在IE7下,生成的Checkbox無法正確的打上勾。 原因是 chkbox控件還沒初始化(appendChild),就開始操作它的結(jié)果2009-12-12手機(jī)開發(fā)必備技巧:javascript及CSS功能代碼分享
這篇文章主要介紹了手機(jī)開發(fā)必備技巧:javascript及CSS功能代碼分享,本文講解了viewport(可視區(qū)域)操作、鏈接操作、javascript事件等內(nèi)容,需要的朋友可以參考下2015-05-05JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
這篇文章主要介紹了JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下2015-03-03