本文主要是介绍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},
这篇关于element-ui el-image :initial-index 动态调整不生效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
