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弹出框