elementui和el-upload在v-for裡使用時如何取得index

這篇文章主要介紹了關於elementui和el-upload在v-for裡使用時如何獲取index ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

<div v-for = &#39;item in list&#39;>
　　<div @click="getImageTypeIndex(index)">
                      <el-upload
                        class="upload-demo"
                        drag
                        :action="uploadUrl"
                        :headers = "{token : userToken}" //带用户token
                        :on-success="getImageSuccess"  //上传成功
                        :before-upload="beforeAvatarUpload"
                        :show-file-list = "false"
                        :on-error = "getImageError"
                      >　　　　　　　　　　　　　　　//若上传失败，可继续拖拽
                        <div v-show="!item.imageUrl">
                          <i class="el-icon-upload"></i>
                          <p class="c8492A6 f14 upload-p">点击或拖拽 上传<span class="cFF8400">图片</span></p>
                          <p class="c8492A6 f12 upload-p">只能上传 jpg/png 文件，且不超过500kb</p>
                        </div>　　　　　　　　　　　　　　　//若上传成功，展示图片
                        <img src="/static/imghwm/default1.png"  data-src="imgUrl + &#39;?fileId=&#39; + item.imageUrl + &#39;&token=&#39; + userToken"  class="lazy"  v-show="item.imageUrl" : alt=""    style="max-width:90%">
                      </el-upload>
                    </div>
</div>

//      获取当前index
getImageTypeIndex:function (index) {this.uploadImageType = index  //先在data里定义下，此处省略定义},



 //      图片上传成功
getImageSuccess:function (res, file) {
        this.$message({
          message: '上传成功！',
          type: 'success'
        });
　　　　　this.list[this.uploadImageIndex].imageUrl = res.data.fileId   //我这里是list里有 imageUrl 来存储图片id,展示的地方根据id自己拼url
 },

備註：el-upload 的getImageSuccess 方法，暫不支援其他參數，所以為了取得清單的index，可以透過上述方法，在el-upload外層套一個p取得index， 然後再在 getImageSuccess 方法內根據index 對資料操作。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

jQuery和canvas實現的球體平拋及顏色動態變換效果

基於JSON格式數據的簡單jQuery投影片外掛程式(jquery-slider)的介紹

以上是elementui和el-upload在v-for裡使用時如何取得index的詳細內容。更多資訊請關注PHP中文網其他相關文章！