效果
错乱效果(表格的时间列显示在图片上方)
正确效果
问题
Vue3中使用Element-Plus的el-table嵌套el-image查看大图导致CSS样式错乱
版本
"element-plus": "2.5.5",
解决办法
1、 办法一:设置CSS样式,直接继承父元素 z-index 属性的值
.el-table .el-table__cell {
z-index: inherit;
}
tips:如果不生效参照以下代码
:deep() .el-table .el-table__cell {
z-index: inherit !important;
}
2、办法二: 在 el-image 上添加属性 preview-teleported="true" (推荐)
<el-table-column prop="imageUrl" label="图片">
<template #default="scope">
<el-image
:src="scope.row.imageUrl"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[scope.row.imageUrl]"
:initial-index="0"
:preview-teleported="true"
fit="contain"
/>
</template>
</el-table-column>
文档地址:
https://element-plus.org/zh-CN/component/image.html