vue3使用qrcode生成二维码

猿小章

已于 2023-06-09 15:15:37 修改

阅读量2.7k

点赞数

文章标签： vue.js

于 2023-06-09 15:13:22 首次发布

本文链接：https://blog.csdn.net/weixin_36476713/article/details/131128026

版权

该文章演示了如何在Vue3项目中结合原生table组件和qrcode.vue插件，生成二维码展示在表格中。首先通过npm安装qrcode.vue，然后在Table组件模板中，针对特定列（如qrcodeUrl）插入qrcode-vue组件，设置值和大小。父组件定义表格列和数据，调用Table组件并传递数据。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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>