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
},