首頁 > 文章 > web前端 > elementui和el-upload在v-for裡使用時如何取得index

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

不言原創: 2018-07-05 17:22:363546瀏覽

這篇文章主要介紹了關於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 v-show="item.imageUrl" :src="imgUrl + &#39;?fileId=&#39; + item.imageUrl + &#39;&token=&#39; + userToken" alt="" height="180">
                      </el-upload>
                    </div>
</div>

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



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

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

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

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

相關文章