关于javascript: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 表格缩略图悬浮放大性能的实例代码，心愿对大家有所帮忙，如果大家有任何疑问请给我留言，我会及时回复大家的。因为是刚开始写这种文章，如有不足之处欢送指出。