vue3使用原生table组件加载qrcode插件显示二维码。
首先npm安装：

npm install --save qrcode.vue 

完整代码如下：
Table组件内容：

<template>
    <div>
      <table>
        <thead>
          <tr>
            <th v-for="column in tableColumns" :key="column.key">{{ column.label }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td v-for="column in tableColumns" :key="column.key">
              <template v-if="column.key === 'qrcodeUrl'">
                <qrcode-vue :value="item[column.key]" :size="100" level="H" />
              </template>
              <template v-else>
                {{ item[column.key] }}
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang='ts'>
	  import { defineProps } from 'vue';
	  import QrcodeVue from 'qrcode.vue'
	  defineProps(['tableColumns','tableData'])
  </script>

<style scoped>
	table {
	  width: 100%;
	  border-collapse: collapse;
	}
	
	th,
	td {
	  border: 1px solid #ccc;
	  padding: 8px;
	}
	
	th {
	  background-color: #f2f2f2;
	}
</style>
  

父组件调用：

<template>
    <div>
      <Table :tableColumns="tableColumns" :tableData="tableData" />
    </div>
  </template>
  
  <script setup lang='ts'>
    import Table from '@/components/Table.vue';
    const tableColumns = [
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email' },
        { key: 'qrcodeUrl', label: 'QRCode' },
      ]
    const tableData = [
        { 
            id: 1, 
            name: 'John Doe', 
            email: 'john@example.com',
            qrcodeUrl: 'https://www.baidu.com',
        },
        { 
            id: 2, 
            name: 'zhangjia', 
            email: 'john@345wer.com',
            qrcodeUrl: 'https://www.qq.com', 
        },
    ]
  </script>