解决el-image中预览图片功能顺序问题

简介: 解决el-image中预览图片功能顺序问题

在使用el-image的时候用到了预览图片

点击图片进行预览显示的不对,比如点击第2个显示第一个,解决此问题可以用以下来解决

也就是下标的问题

在使用这个的时候我们一般会配合v-for来进行使用

<el-image
            preview-teleported
            v-for="(item,index) in table.code_img"
            :key="item"
            style="width: 70px; height: 70px; margin: 0 10px 0 0"
            :src="domain + item"
            :zoom-rate="1.2"
            :preview-src-list="code_imgs"
            :initial-index="index"
            fit="cover"
          />

把此属性的值设置为v-for循环的index即可

相关文章
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
3999 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
芋道源码 el-image 层级问题解决
找到组件el-image 然后添加 preview-teleported 属性就解决了
|
移动开发 前端开发 应用服务中间件
解决前端H5调用后端接口出现302问题总结
解决前端H5调用后端接口出现302问题总结
9653 0
解决前端H5调用后端接口出现302问题总结
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10621 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
12883 120
|
JavaScript API
vue使用Element-plus的Image预览时样式崩乱
vue使用Element-plus的Image预览时样式崩乱
616 0
vue使用Element-plus的Image预览时样式崩乱
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
存储
如何在vue3项目中实现国际化
如何在vue3项目中实现国际化
718 0

热门文章

最新文章