EmelentUI里dialog弹框获取dom渲染echarts

问题出处

        众所周知，正常获取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>