问题:
在使用组件库的image时出现了点小问题,预览的图片层级反而没有表格的层级高
效果图:
可以看见我的样式崩乱了,层级混乱
经过F12的查找发现:图片预览的div它的层级并不是最高的,后来查阅官方的Api的时候发现了一个不起眼的属性
preview-teleported
这个属性不得了了啊,看官方介绍
这不就解决了吗!!
最终代码如下:
<el-table-column prop="img" label="店铺图片"> <template #default="scope"> <el-image style="width: 100px; height: 100px" :src="`http://xxxxx` + scope.row.img" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[`http://xxxxx` + scope.row.img]" :initial-index="4" fit="cover" preview-teleported="true" /> </template>
效果:
ok,解决,下个Bug见