element table表格 怎么样 循环遍历某个div？

Question

这样一个表格想出现每个按钮 ‘微信二维码’ 的下面出现一个二维码，按当前注释div写法 当调用插件方法的时候所有的二维码都跑到第一个按钮的下面了，怎么样实现一个按钮下面一个？

     <el-table-column label="商户前台" width="200%">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            title=""
            trigger="hover">
            <!--<div v-show="flag" id="qrcode" ref="qrcode" ></div>-->
            <div slot="reference" class="name-wrapper" style="display: inline-block">
              <el-button size="small" type="danger" style="margin-top:10px" class="chat">
                <a style="color: #fff;" @mouseover="selectStyle" @mouseout="selectOut">微信二维码</a>
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      

调用插件二维码方法

      let qrcode = new QRCode('qrcode',{
          width: 100,    // 设置宽度，单位像素
          height: 100,   // 设置高度，单位像素
          text: 'http://www.cpglib.com/wx/index?shopId='+scope.row.shopId,   // 生成二维码图片
        })
  

Answer 1

谢邀～
你这样的写法循环出来的，只有一个id呀。
方案一、一次性全部生成好：

<div v-show="flag" :id="`qrcode${scope.$index}`" ref="qrcode" ></div>

然后去循环出

// for循环
let qrcode = new QRCode(`qrcode${index}`,{
  width: 100,    // 设置宽度，单位像素
  height: 100,   // 设置高度，单位像素
  text: 'http://www.cpglib.com/wx/index?shopId='+scope.row.shopId,   // 生成二维码图片
});

方案二：
也可以hover时去生成这个二维码。
selectStyle(index){

let qrcode = new QRCode(`qrcode${index}`,{
  width: 100,    // 设置宽度，单位像素
  height: 100,   // 设置高度，单位像素
  text: 'http://www.cpglib.com/wx/index?shopId='+scope.row.shopId,   // 生成二维码图片
});

}