element table表格缩略图预览

可结合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>

效果如下图所示
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/FJ101113/article/details/120650985