<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的初始化，执行数据
opens(){
this.$nextTick(() => {
this.initChart1()
this.initChart2()
})
}在我工作过程中使用Dialog对话框的需求挺多的，也积累了一下使用技巧，本篇文章用作记录使用技巧，基础操作可看elementUI官方文档：element UI官网
:close-on-click-modal="false" //禁用点击空白区域
:close-on-press-escape="false" //禁用ESC键
给对话框设置overflow: auto;属性即可。
overflow: auto;
1.resetFields()
给对话框设置close事件，绑定resetFields()数据初始化方法。
<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()里的数据。
<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;
},
