如何在elementUI的表格中实现图片的预览
具体效果如下图所示:
要想实现这个效果,我们可以使用elementUI中的标签来操作,它包含有两个标签,第一个是悬浮放大的图片定义,第二个是表格中显示的缩略图定义。里面的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表格缩略图悬浮放大功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,我会及时回复大家的。因为是刚开始写这种文章,如有不足之处欢迎指出。