解决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) 预览图片
4203 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
JavaScript
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
876 0
芋道源码 el-image 层级问题解决
找到组件el-image 然后添加 preview-teleported 属性就解决了
|
移动开发 前端开发 应用服务中间件
解决前端H5调用后端接口出现302问题总结
解决前端H5调用后端接口出现302问题总结
9750 0
解决前端H5调用后端接口出现302问题总结
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10753 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: &#39;detailPage&#39;`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
698 2
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
13710 120
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript API
vue使用Element-plus的Image预览时样式崩乱
vue使用Element-plus的Image预览时样式崩乱
653 0
vue使用Element-plus的Image预览时样式崩乱
|
存储
如何在vue3项目中实现国际化
如何在vue3项目中实现国际化
749 0