element-ui Table+Popover 实现表格中二维码点击放大

Table+Popover 实现表格中二维码点击放大

最近在用vue + element-ui写一个后台管理系统，第一次使用element-ui中间遇到了写问题，把它记录下来，和大家分享，后续遇到的问题会陆续发出来。
今天的问题是，我想在一个element-ui的表格里面加一个二维码，当我hover（点击把相应的代码换成Popover click即可）的时候二维码放大，效果图如下：

hover前：
hover后：

代码如下：

   <el-table style="width: 100%" :data="tableData" >
    <el-table-column prop="title" label="标题" width="200%"></el-table-column>
    <el-table-column prop="sort" label="分类" width="200px"></el-table-column>
    <el-table-column prop="sort" label="排序" width="200px"> </el-table-column>
    <el-table-column prop="created_at" label="创建时间" width="200px"></el-table-column>
    <el-table-column prop="manage" label="操作" width="200px" column-key>
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small" >编辑</el-button>
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover">
          <vue_qart :config='config' :downloadButton='downloadButton' ></vue_qart>
          <i class="iconfont gw-icon-erweima" slot="reference" @mouseenter.navive="show_qrcode(scope.row.detail_url)" ></i>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>

项目中使用的二维码生成插件是vue-qart：
配置及用法如图所示，可以看成是一个组件，直接引入传入对应的参数就好

我的思路是使用mouseenter，在鼠标移到对应的小二维码上面，执行函数将config.value换成对应的url 路径即可。
仅供参考。。。