解決element-ui中upload組件使用多個(gè)時(shí)無(wú)法綁定對(duì)應(yīng)的元素
以前寫(xiě)的項(xiàng)目關(guān)于圖片上傳的都是單張或幾張圖片上傳(主要是基于vue的element)莺禁,圖片路徑都是固定寫(xiě)的,所以遇見(jiàn)過(guò)列表中多個(gè)上傳圖片的問(wèn)題辞色,先看下常用的形式
正常操作element里面的屬性都能滿足,當(dāng)列表中要上傳時(shí)就不行了谆膳,看下實(shí)際需求
首先列表中的數(shù)據(jù)都是動(dòng)態(tài)獲取的福扬,所以要更改任一張圖片就要得到這張圖片的索引值index,在el-upload 組件中的:on-success="handleAdPicSuccess"和 :on-change="handleAdPicChange"等這些方法中沒(méi)有能傳參的方式办悟,所以只能在執(zhí)行這些方法之前添加需要的參數(shù)了,方法如下:
把:on-success="handleAdPicSuccess" :on-change="handleAdPicChange" 改成:on-success="(res,file)=>{return handleHeadSuccess(res,file, index)}" :on-change="(res,file)=>{return handleHeadChange(res,file, index)}"這樣在調(diào)取方法時(shí)就能獲取每條數(shù)據(jù)的索引index了滩褥! ??
此方法不一定是最簡(jiǎn)單的病蛉,如果哪位大神有更好的方法,不妨交流交流