首先今天一直在糾結為什麼dialog明明顯示了卻不顯示二維碼，直到第二次開啟dialog才顯示，原來確實如我同事所說，一開始並沒有選中相應的容器，原因是dialog的載入需要時間，我用了定時器試一下發現在多久時間之後在執行二維碼的渲染事件就可以，這樣讓我瞭解其真正的原因。

解決方案如下：

1.當點選按鈕，讓dialog顯示介面的事件如下

lookAdClick(ggwId) {
      this.QRcode.ggwId = ggwId;
      var _this = this;
      this.QRcode.qrLoading=true;
      this.QRcode.dialogVisible = true;
     
     // window.setTimeout(this.qrCode,200)
      // this.qrCode();
    },
 

2.Dialog 開啟的回撥事件

open

所以在dialog上定義該事件

<el-dialog
                    title="檢視廣告內容"
                    :visible.sync="QRcode.dialogVisible"
                    :close-on-click-modal="false"
                    width="350px"
                    height="520px"
                    @open="openQrCode"
                     >
                    <div class="qrcode" v-loading="QRcode.qrLoading">
                        
                        <div id="qrcode"></div>
                    </div>

               </el-dialog>
 

3.在該事件上傳送請求，並且生成二維碼

  //DIALOG開啟
    openQrCode() {
      var _this = this;
      $(".qrcode canvas").remove();
      let para = {
        token: this.token,
        advertpositionnum: this.QRcode.ggwId
      };
      reqQRcode(para)
        .then(res => {
          if (res.status === 200) {
            _this.qrCode();
            this.QRcode.qrLoading = false;
          }
        })
        .catch(() => {
          _this.qrCode();
          _this.QRcode.qrLoading = false;
          console.log("zlz");
        });
    },
 

最後qrCode的函式的程式碼如下：

qrCode() {
      var _this = this;
      console.log($("#qrcode"));
      $("#qrcode").qrcode({
        render: "canvas",
        text: "http://www.baidu.com?id=",
        width: "200", //二維碼的寬度
        height: "200", //二維碼的高度
        background: "#ffffff", //二維碼的後景色
        foreground: "#000000", //二維碼的前景色
        src: "img/gray.jpg" //二維碼中間的圖片
      });
    },

這樣就完美解決了難題啦！！！！