项目中有这样的数据格式:
[
{
attachments: [] // 图片地址数组
// ...其它
},
// ...其它
]
这时候需要将外层循环后再循环图片,使用el-image的previewSrcList开启大图预览。当外层有多个的时候,这时点击前面的图片大图,后面的内容会穿透到大图上,此时查看后面内容的层级为1,但大图的层级为2000,按常理不会穿透,百思不得其解,F12调试将.el-card__body的层级去掉时候就正常了。
<el-row :gutter="20" v-if="item.children">
<el-col :span="24 / item.children.length" v-for="child in item.children" :key="child.id">
<el-card shadow="hover" style="z-index: 1">
<h5 class="ei-flow-title">{{ child.title }}</h5>
<div class="demo-image__preview img-flex" v-if="child.attachments.length > 0">
<el-image fit="cover" v-for="(img, i) in child.attachments" :key="i" :src="img" :preview-src-list="child.attachments" ref="previewImage" @click.capture="handlePreviewImage(i)">
</el-image>
</div>
<div v-if="child.attachments.length < 1 && item.status == 1">
<div class="demo-image__error">
<div class="block">
<el-image>
<div slot="error" class="image-slot">无稽核图片...</div>
</el-image>
</div>
</div>
</div>
<div style="padding: 10px 0; display: flex">
<div style="min-width: 80px; font-size: 15px; line-height: 32px">稽核意见:</div>
<div style="margin: 0 5px; flex-grow: 1">
<el-tag :hit="true" type="info" class="custom-tag" width="100%">{{ child.content }}</el-tag>
</div>
</div>
<div class="ei-flow-time">{{ child.time }}</div>
<label class="ei-flow-status" v-show="child.status == 1" :style="{ backgroundColor: child.background != null && String(child.background).length > 0 ? child.background : '#13ce66' }">
<!-- <i class="el-icon-upload-success el-icon-check"></i> -->
<span v-if="child.transferStatus == 0">稽核驳回</span>
<span v-else>稽核通过</span>
</label>
<label class="ei-flow-status" v-show="child.status == 0" :style="{ backgroundColor: '#909399' }"> 等待稽核 </label>
</el-card>
</el-col>
</el-row>
解决css:
.ei-flow-form .el-card__body {
// 解决大图预览其它地方层级穿透问题
z-index: initial !important;
}