vue3+element-plus点击列表中的图片预览时,图片被表格覆盖

文章目录

  • 问题
  • 解决


问题

视觉

vue3+element-plus点击列表中的图片预览时,图片被表格覆盖_第1张图片
点击图片进行预览,但还能继续选中其他的图片进行预览,鼠标放在表格上,那一行表格也会选中,如图所示第一行的效果。


代码

<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属性。
vue3+element-plus点击列表中的图片预览时,图片被表格覆盖_第2张图片
中加入属性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>

你可能感兴趣的:(web前端,elementUi,Vue,vue.js,前端,前端框架,web)