elementui的dialog添加echarts图表找不到dom宽高问题
elementui的dialog添加echarts图表
- dialog 挂载后再获取 dom 元素（this.nextTick和this.refs混合使用）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<template>
<el-dialog title="" :visible.sync="dialogVisible" >
<div id="chart" ref="myEchart"></div>
</el-dialog>
</template>
<script>
export default {
data() {
return{
dialogVisible:false
}
},
methods:{
showDialog(){
this.dialogVisible = true;
// 点击之后立即执行this.$nextTick这个函数
// dom就是更新之后的dom了，this.$refs就能获取到dom的实例了
this.$nextTick(() => this.chart())
},
chart(){
var chart = echarts.init(this.$refs.myEchart)
chart.setOption({})
}
}
</script>
