Cuando vue3+element-plus hace clic en la vista previa de la imagen en la lista, la imagen queda cubierta por la tabla

---

pregunta

visión

Haga clic en la imagen para obtener una vista previa, pero puede continuar seleccionando otras imágenes para obtener una vista previa, coloque el mouse sobre la tabla, esa fila de la tabla también se seleccionará, como se muestra en la primera fila de la imagen.

---

el código

<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"/>

---

resolver

El documento del sitio web oficial tiene dicho atributo, y el sitio web oficial es el atributo Imagen de esta descripción.

Añádele <el-image>atributos preview-teleported="true".

<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>