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

封装成组件
用this.$refs.XX或this.$el访问dom

Answer 2

把#qrcode 这个div放在slot里边试试？