element table表格缩略图预览

最新推荐文章于 2024-01-10 10:47:02 发布

原创最新推荐文章于 2024-01-10 10:47:02 发布 · 2.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #elementui #vue.js

本文介绍如何利用Element-UI的popover组件在表格中创建一个悬停显示大图的效果。通过设置trigger为'hover'和placement为'right'，配合img标签，可以在鼠标移到缩略图上时弹出全尺寸图片，提升了用户体验。

可结合element Popover弹出框来实现

<el-table-column label="缩略图" width="200">
	<template slot-scope="scope">
		<!-- trigger(触发方式)、placement(出现位置) -->
    	<el-popover trigger="hover" placement="right">
    		<!-- table中原本显示的图片 -->
        	<img slot="reference" :src="scope.row.headimage" :alt="scope.row.headimage" class="image">
        	<!-- 鼠标移入时弹出的图片 -->
            <img :src="scope.row.headimage" alt="" class="big">
        </el-popover>
   </template>
</el-table-column>