element-ui el-image :initial-index 动态调整不生效

这篇具有很好参考价值的文章主要介绍了element-ui el-image :initial-index 动态调整不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 版本 2.6.11
element-ui 2.12.0

在使用 el-image 时需要展示图片列表并查看,但我无论怎么尝试 :initial-index="index"都不会生效,或者是我的使用方法不对。
目前是使用了一个动态的集合来改变:preview-src-list=“showImageList(index)” 的值,从而实现点击任意图片即打开预览,并且不影响上下查看。文章来源地址https://www.toymoban.com/news/detail-821688.html

          <div v-for="(item, index) in list" :key="index" class="divClses">
            <el-checkbox @change="suolietucheck" class="checkboxel" :label="item" >
                <!-- <img :src="item.urlSD" alt="Selected Image" class="thumbnail"> -->
                {{item.ivm}}
            </el-checkbox>
            <!-- :initial-index="index" @click="showImageList(index)"-->
            <el-image
                  //v-if="srcListStaut"
                  class="thumbnail"
                  :src="item.urlSD" 
                  :preview-src-list="showImageList(index)" 
                  //ref="previewImg"
                  >
            </el-image>
          </div>
            showImageList(index){

              // this.$refs.preview[index].showViewer = true
              // this.$refs.previewImg[index].showViewer = true
              // 收到了for中的index,无法直接使用:initial-index="index",因为不是动态响应的,所以不会改变,所以需要一个srcListIndex来传递
              // 不知道为啥,不生效
              // this.srcListStaut = false
              // this.srcListIndex = index
              // this.srcListStaut =true
              // this.srcList = this.srcList
              // console.log("修改展示图片的起始位置",this.$refs.previewImg[index])
				
			  // --------------------------可用代码(下面的部分)-----------------------------
              // 使用动态调整 绑定的数据集合的方式 把当前页的数据全部放到最后
              if(index==0) return this.srcList
              // 赋值一个数组,避免原数据损坏
              let arr2 = this.srcList.concat(); 
              // 截取 index前数组 & index后数组
              let end = arr2.slice(index)
              let start = arr2.slice(0,index)
              // 把index后数组置前,把index前数组置后
              for(let i=0;i < start.length;i++){
                end.push(start[i])
              }
              console.log("修改后的集合end:",end)
              return end
            },

到了这里,关于element-ui el-image :initial-index 动态调整不生效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题

    当使用 el-image /el-image 在网页中加载本地图片时,会出现图片加载失败的问题,但使用 img / 标签可以正常显示。 在 element 组件上使用相对路径时 webpack 不会对路径进行处理,导致请求了一个无效的路径。 将 el-image src=\\\"../assets/bg_login.jpeg\\\"/el-image 改为 el-image :src=\\\"require(\\\'../asset

    2024年02月06日
    浏览(48)
  • vue3+element-plus+el-image实现点击按钮预览大图

    需求:点击某个按钮实现el-image中预览大图的效果 官方文档:以下是官方的写法,并不能达到我们的要求,官方实现的功能是点击图片达到预览大图的效果。如果你的按钮就是图片,也可以达到目前的功能 el-image-viewer组件是element官方的组件,只是文档中没有写出来,这个组

    2024年02月12日
    浏览(55)
  • 【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览,拖拽导致图片预览不完整问题

    el-dialog 内使用 el-image 并添加 preview-src-list 预览,拖拽导致图片预览不完整 添加 preview-teleported 属性,官方对这个的解释是: image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true 解决el-image在el-dialog内预览展示不全

    2024年02月16日
    浏览(33)
  • 【el-image图片查看时 样式穿透表格问题】

    element-ui el-image图片查看 样式混乱 解决方式 加个样式即可

    2024年02月13日
    浏览(39)
  • element-ui文件上传el-upload

            element-ui官网中有文件上传         首先先展示一下我页面的实现效果,如下图所示:          从图中可以看出,我这边实现的是一个可显示进度条的文件上传操作,而且如果上传的文件很大等,还可以中断文件上传。         值得注意的是,如果有添

    2024年02月05日
    浏览(51)
  • 【element-ui】el-dialog改变宽度

    dialog默认宽度为父元素的50%,这就导致在移动端会非常的窄,如图1,需要限定宽度。 解决方法:添加 custom-class 属性,然后在style中编写样式, 注意 ,如果有 scoped 限定,需要加 ::v-deep

    2024年02月11日
    浏览(55)
  • element-ui树形控件el-tree详解

    概述 这里我利用element-ui开发一个vue的树形组件 引入element-ui 安装element-plus 安装按需导入 修改vite.config.js配置按需加载 tree树形控件详解 属性名 说明 类型 可选值 默认值 data 展示数据 array — — empty-text 内容为空的时候展示的文本 string — — node-key 每个树节点用来作为唯一标

    2024年02月07日
    浏览(105)
  • element-ui的el-dialog,简单的封装。

    el-dialog是使用率很高的组件 使用el-dialog很多都是按照文档的例子,用一个变量控制是否显示,再来一个变量控制标题。 如果我这个对话框多个地方使用的话还要创建多个变量,甚至关闭之后还要清空一些变量,应该可以简化一点。我写vue的时候奉行的都是数据驱动,像刚才

    2024年02月12日
    浏览(49)
  • [element-ui] el-table点击高亮当前行

    1、highlight-current-row 2、:row-class-name=“tableRowClassName”,需要借助@row-click=\\\"handleRowClick\\\"获取当前点击行的下标 参考: elementUI中table点击高亮当前行的两种方式

    2024年03月21日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包