文章目录
问题
视觉
点击图片进行预览,但还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行的效果。
代码
html
<el-table-column prop="id" label="ID" width="80" align="center" sortable/>
<el-table-column label="商品图片" width="85px">
<template #default="scope">
<el-image
style="width: 60px;height: 60px;"
:src="scope.row.avatar"
:preview-src-list="[scope.row.avatar]"
hide-on-click-modal="true">
<template #error>
<div class="image-slot">
<el-icon><user /></el-icon>
</div>
</template>
</el-image>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" width="130"/>
解决
官网文档有这么一个属性,官网是这个描述的Image属性。
在<el-image>
中加入属性preview-teleported="true"
即可。
html<el-table-column label="商品图片" width="85px"> <template #default="scope"> <el-image style="width: 60px; height: 60px;" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" hide-on-click-modal="true" preview-teleported="true"> </el-image> </template> </el-table-column>