頁面中使用多個element-ui upload上傳組件時綁定對應(yīng)元素

elemet-ui里提供的upload文件上傳組件,功能很強(qiáng)大,能滿足單獨使用的需求,但是有時候會存在多次復(fù)用上傳組件的需求,如下圖的樣子,這時候就出現(xiàn)了問題,頁面上有多個上傳組件時,要怎么操作呢?


image.png

解決方案1 修改源碼（看到一位大神推薦的）

1、找到node_modules/element-ui/lib/element-ui.common.js文件


image.png

2、在里面的props里多加一個傳遞的參數(shù),自定義參數(shù)名

 onPreview: {
      type: Function
    },
  /*這個是新加的 start*/
    objectBind:null,
 /*這個是新加的 end*/
    onSuccess: {
      type: Function,
      default: noop
    },

3、接著往下找到你需要用到的函數(shù),在參數(shù)里加上你新增的這個參數(shù)this.objectBind


image.png

4、回到項目中,在引用的時候把這個參數(shù)傳進(jìn)去,一般是索引，利用索引去匹配


image.png

解決方案2 自己進(jìn)行二次封裝

  • 利用閉包的寫法,把默認(rèn)的參數(shù)和自己新增的參數(shù)作為一個新的函數(shù)返回，拿到索引值，進(jìn)行相關(guān)邏輯處理
 :on-success="function (res,file){return handleImgSuccess(res,file,scope.$index)}"
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容