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