How does the element table table cycle through a div?

such a table wants to appear a QR code under each button "Wechat QR code". Press the current comment div when calling the plug-in method, all the QR codes go below the first button. How to implement the next button?

 <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: -sharpfff;" @mouseover="selectStyle" @mouseout="selectOut"></a>
          </el-button>
        </div>
      </el-popover>
    </template>
  </el-table-column>

call the plug-in QR code method

  let qrcode = new QRCode("qrcode",{
      width: 100,    // 
      height: 100,   // 
      text: "http://www.cpglib.com/wx/index?shopId="+scope.row.shopId,   // 
    })

Qrcode element vue.js javascript

Nov.10,2021

try putting the div of-sharpqrcode in slot?

encapsulated as a component
access dom with this.$refs.XX or this.$el

Previous: Why the tree component nodes of ElementUi can only be added and not subtracted

Next: How to extract the number of the corresponding position in this string