问题出处
众所周知,正常获取dom要在页面渲染完成后,在Vue2中会在mounted里写,但是dialog弹框,在页面加载完成时是没有跟着被渲染的,这个时候我们是获取不到其dom的,如果写在mounted中就会报错,这个时候该怎么办呢?
问题背景
点击查看按钮,获取每行的参数,将id传入后端,得到该行数据,在处理数据,在渲染进弹框内
解决办法
监听
1.数据发生变化
因为这里我需要请求后端数据,所以当数据发生改变时,就证明点开了弹框,从而获取dom,处理数据进行渲染
watch: {
from: function () {
let chartDomOne = document.getElementById("ones");
let myChartone = echarts.init(chartDomOne);
let chartDomTwo = document.getElementById("twos");
let myCharttwo = echarts.init(chartDomTwo);
let optionone = {
xAxis: {
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
},
title: {
text: "月访问量(次)",
},
series: [
{
data: this.from.monthList,
type: "line",
},
],
tooltip: {
trigger: "axis",
},
};
optionone && myChartone.setOption(optionone);
let optiontwo = {
xAxis: {
type: "category",
data: this.from.yearList,
},
yAxis: {
type: "value",
},
title: {
text: "年访问量(次)",
},
series: [
{
data: this.from.yearLists,
type: "bar",
barWidth: 30,
barMaxWidth: 30,
},
],
dataZoom: [
{
type: "inside",
start: 0,
end: 50,
},
{
start: 0,
end: 50,
height: 10,
},
],
tooltip: {
trigger: "axis",
},
};
optiontwo && myCharttwo.setOption(optiontwo);
},
2.弹框绑定值
这里监听弹框绑定值是一样的,监听dialog框的绑定值:visible.sync="centerDialogVisible",
centerDialogVisible也是可以的,里面写法也是一样的
<el-dialog
:visible.sync="centerDialogVisible"
width="680px"
center
:show-close="false"
>
<i class="el-icon-close icons" @click="centerDialogVisible = false"></i>
<div class="centerdiv">
<div v-if="shows">
<el-button
:disabled="flagOne"
@click="nownum--"
round
icon="el-icon-arrow-left"
/>
</div>
<img
v-if="urllist.length"
:src="$tool.imageUrl + urllist[nownum].split('group1/M00/')[1]"
style="width: 600px"
alt=""
/>
<div v-if="shows">
<el-button
:disabled="flagTwo"
@click="nownum++"
round
icon="el-icon-arrow-right"
/>
</div>
</div>
</el-dialog>