（14）VUE+ElementUI在table组件中将动态链接生成二维码

vue-qrcode的GitHub网址：https://github.com/fengyuanchen/vue-qrcode

安装vue-qrcode

npm install @chenfengyuan/vue-qrcode vue

全局引用

// 在main.js中
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode)

// 在页面需要生成二维码的地方插入组件
// <qrcode value="需要生成二维码的链接" :options="{ width: 200 }"></qrcode>

// 举例：
<el-table-column label="二维码" align="center">
       <template slot-scope="scope">
               <qrcode :value="scope.row.qr_code" :options="{ width: 60 }"></qrcode>
       </template>
</el-table-column>

单个页面使用组件

// 在页面中引入文件
import VueQrcode from '@chenfengyuan/vue-qrcode';
components: {
      qrcode: VueQrcode
},

// 在需要的位置插入组件：
<el-table-column label="二维码" align="center">
       <template slot-scope="scope">
               <qrcode :value="scope.row.qr_code" :options="{ width: 60 }"></qrcode>
       </template>
</el-table-column>