element-ui?對話框dialog使用echarts報錯'dom沒有獲取到'的問題
- 給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)文章
js取兩個數(shù)組的交集|差集|并集|補集|去重示例代碼
求兩個集合的補集、交集、差集、并集等等在實際應(yīng)用中經(jīng)常會使用到,下面與大家分享下具體的實現(xiàn)代碼,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08JS+CSS實現(xiàn)鼠標(biāo)經(jīng)過彈出一個DIV框完整實例(帶緩沖動畫漸變效果)
這篇文章主要介紹了JS+CSS實現(xiàn)鼠標(biāo)經(jīng)過彈出一個DIV框的實現(xiàn)方法,帶緩沖漸變動畫效果,涉及鼠標(biāo)事件的響應(yīng)及結(jié)合時間函數(shù)定時觸發(fā)形成動畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2016-03-03uniapp實現(xiàn)全局設(shè)置字體大小(小中大的字體切換)
隨著UniApp的流行,越來越多的開發(fā)者選擇使用它來構(gòu)建跨平臺應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)全局設(shè)置字體大小(小中大的字體切換)的相關(guān)資料,需要的朋友可以參考下2023-06-06JS驗證輸入的是否是數(shù)字及保留幾位小數(shù)問題
這篇文章主要介紹了JS驗證輸入的是否是數(shù)字及保留幾位小數(shù)問題,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05IE7中javascript操作CheckBox的checked=true不打勾的解決方法
在IE7下,生成的Checkbox無法正確的打上勾。 原因是 chkbox控件還沒初始化(appendChild),就開始操作它的結(jié)果2009-12-12手機開發(fā)必備技巧:javascript及CSS功能代碼分享
這篇文章主要介紹了手機開發(fā)必備技巧:javascript及CSS功能代碼分享,本文講解了viewport(可視區(qū)域)操作、鏈接操作、javascript事件等內(nèi)容,需要的朋友可以參考下2015-05-05