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)” 的值,从而实现点击任意图片即打开预览,并且不影响上下查看。

          <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
            },
  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值