因为有一个列表需要显示二维码，所以就研究了一下二维码的生成，选择了使用VueQr ，选定之后就开怼了，很简单就实现了效果。做好之后感觉过于简单了，于是给自己加点戏，加了一个鼠标放上去悬浮显示大图。这个ElementUI也有现成的控件Popover 弹出框，略加改造就成了，效果就像下面这样：

因为还会有其他地方也用到这个效果，所以封装了一个组件：

// Table列表中的二维码悬浮显示
<template>
  <el-popover :placement="placement" :width="width" :trigger="trigger">
    <vueqr :text="text" :size="bigsize" />
    <vueqr slot="reference" :text="text" :size="smallsize" />
  </el-popover>
</template>

<script >
import vueQr from 'vue-qr' // 引入vue-qr
export default {
  name: 'TableErCodePop', // 起个名字
  components: {
    vueqr: vueQr // 用上
  },
  props: {
    width: { // 悬浮窗宽度
      type: Number,
      default: 200
    },
    trigger: { // 触发方式
      type: String,
      default: 'hover'
    },
    text: { // 生成二维码的内容
      type: String,
      default: ''
    },
    placement: { // 出现的位置
      type: String,
      default: 'top-start'
    },
    smallsize: { // 缩略图的大小
      type: Number,
      default: 40
    },
    bigsize: { // 大二维码大小
      type: Number,
      default: 180
    }
  }
}
</script>

在需要使用的地方引用就可以了

import TableErCodePop from '@/components/ErCode/tableErCodePop'


 components: {
    tableErCodePop: TableErCodePop
  }

  <tableErCodePop :text="scope.row.ErCode + '' " :smallsize="30" />