解决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) 预览图片
2994 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
JavaScript API 定位技术
vue中如何获取到当前位置的天气
vue中如何获取到当前位置的天气
1427 0
|
测试技术
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
5241 0
Element的el-table行列错位对不齐问题处理
|
JavaScript 前端开发 API
vue element plus Cascader 级联选择器
vue element plus Cascader 级联选择器
1365 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9813 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript API
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用vue3+vite+electron构建小项目介绍Electron进程间通信
1524 3
|
JavaScript
SpringBoot+Vue+ElementUI 实现视频播放 轮播图效果
这篇文章介绍了如何在SpringBoot+Vue+ElementUI项目中使用vue-awesome-swiper插件实现视频播放轮播图效果,包括安装插件、引入项目和使用案例的步骤。
SpringBoot+Vue+ElementUI 实现视频播放 轮播图效果
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
1697 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用