elementUI如何实现table表格中图片的鼠标移入/点击显示

如何在elementUI的表格中实现图片的预览

具体效果如下图所示：

要想实现这个效果，我们可以使用elementUI中的<el-popover>标签来操作，它包含有两个<img>标签，第一个是悬浮放大的图片定义，第二个是表格中显示的缩略图定义。里面的trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。本文用的是slot="reference"具名插槽的方法，详细说明可以访问elementUI官网进行查看。具体的实现代码如下：

<el-table-column label="店铺logo" align="center">
    <template slot-scope="scope">
        <el-popover
            placement="right"
            width="200"
            trigger="hover">
            <img :src="scope.row.shop_img" class="imgStyle"/>
            <img slot="reference" :src="scope.row.shop_img" style="max-height: 50px;max-width: 150px">
        </el-popover>
    </template>
</el-table-column>

总结

以上所述就是给大家介绍的vue中有关element-ui表格缩略图悬浮放大功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。因为是刚开始写这种文章，如有不足之处欢迎指出。