element-ui 表格中显示二维码

需求如下：

通过使用 element ui 表格 (Table) 组件 给每条数据添加 二维码 功能

实现效果如下：

推荐使用：《vue-qr》 插件

不需要进行封装可以直接在表格中遍历渲染

下载：npm install vue-qr --save

在 main.js 中引入

// vue2.0  引入Vue-qr
import VueQr from 'vue-qr'
 
// vue3.0  引入Vue-qr
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
    components: {VueQr}
})

页面使用

  <el-table-column label="二维码">
        <template slot-scope="scope">
          <!-- 生成二维码 -->
          <vue-qr
            :ref="'ref'+scope.row.securityId"
            :size="80"
            :margin="0"
            :auto-color="true"
            :dot-scale="1"
            :text="scope.row.invitationCode"
          />
        </template>
   </el-table-column>
<script>
import VueQr from 'vue-qr'
import { codeList, updateExpiryDate } from "@/api/inCode/qrCode";

export default {
  components: {
    VueQr
  },
  data() {
    return {
      // 总条数
      total: 0,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getCodeList();
  },
  methods: {
    // 列表
    getCodeList() {
      codeList(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total;
      });
    },
    // 更新邀请码
    updateCode(row) {
      this.$confirm('是否更新邀请码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.id
        }
        updateExpiryDate(params).then(response => {
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: '更新成功!'
            });
            this.getCodeList()
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消更新'
        });
      });
    }
  }
};
</script>

不推荐使用：-->qrcodejs2<-- 插件

原因：在于使用qrcodejs2不能在Table中渲染显示，需要进行封装调用才行

至此就完成了element-ui 表格中显示二维码功能