vue使用Element-plus的Image预览时样式崩乱

简介: vue使用Element-plus的Image预览时样式崩乱

问题:

在使用组件库的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见

相关文章
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1037 0
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
30 9