vue 版本 2.6.11
element-ui 2.12.0

在使用 el-image 時(shí)需要展示圖片列表并查看，但我無論怎么嘗試 :initial-index="index"都不會(huì)生效，或者是我的使用方法不對(duì)。
目前是使用了一個(gè)動(dòng)態(tài)的集合來改變:preview-src-list=“showImageList(index)” 的值,從而實(shí)現(xiàn)點(diǎn)擊任意圖片即打開預(yù)覽，并且不影響上下查看。文章來源地址http://www.zghlxwxcb.cn/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"，因?yàn)椴皇莿?dòng)態(tài)響應(yīng)的，所以不會(huì)改變，所以需要一個(gè)srcListIndex來傳遞
              // 不知道為啥，不生效
              // this.srcListStaut = false
              // this.srcListIndex = index
              // this.srcListStaut =true
              // this.srcList = this.srcList
              // console.log("修改展示圖片的起始位置",this.$refs.previewImg[index])
				
			  // --------------------------可用代碼(下面的部分)-----------------------------
              // 使用動(dòng)態(tài)調(diào)整 綁定的數(shù)據(jù)集合的方式 把當(dāng)前頁的數(shù)據(jù)全部放到最后
              if(index==0) return this.srcList
              // 賦值一個(gè)數(shù)組，避免原數(shù)據(jù)損壞
              let arr2 = this.srcList.concat(); 
              // 截取 index前數(shù)組 & index后數(shù)組
              let end = arr2.slice(index)
              let start = arr2.slice(0,index)
              // 把index后數(shù)組置前，把index前數(shù)組置后
              for(let i=0;i < start.length;i++){
                end.push(start[i])
              }
              console.log("修改后的集合end：",end)
              return end
            },

到了這里，關(guān)于element-ui el-image :initial-index 動(dòng)態(tài)調(diào)整不生效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！