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 路徑便可。
僅供參考。。。