vue中element-ui表格縮略圖懸浮放大功能的實例代碼

<el-table-column

   prop= "picture"

   header-align= "center"

   align= "center"

   width= "150px"

   label= "圖片" >

   <template slot-scope= "scope" >

    <el-popover

     placement= "right"

     title= ""

     trigger= "hover" >

     <img :src= "scope.row.picture" />

     <img slot= "reference" :src= "scope.row.picture" :alt= "scope.row.picture" style= "max-height: 50px;max-width: 130px" >

    </el-popover>

   </template>

</el-table-column>

其中能夠看到<el-popover>標籤包圍的有兩個<img/>標籤，第一個是懸浮放大的圖片定義，第二個是表格中顯示的索勒圖定義，它有一個關鍵的屬性 slot="reference" 。而<el-popover>的觸發方式是 hover，即當鼠標浮動在表格圖片上時，自動顯示大圖片，除了支持 hover 方式外，還支持 click，focus 和 manual；此處title的屬性值設爲""，即不顯示標題。

此處縮略圖和大圖都是同一張圖片，若是有不一樣的圖片，也是能夠的，只須要在 :src 中設置不一樣的值便可

關於Popover的詳細使用說明，建議參考官方文檔Popover彈出框