解決element-ui 中upload組件使用多個時無法綁定對應的元素


問題場景

 

我們在一個列表中分別都需要有upload組件的時候也就涉及到了多個upload同時存在;

因為一般可以在success回調中拿到上傳成功的圖片已經成功的response,多個也可以,這個沒毛病;

文檔如下:

 

 

!!!但是,當多個同類型的upload同時存在的時候,我在怎么知道回調里面的fileList該與誰關聯呢?

例如這種情況

 

這兩個甚至無數個“步驟”,對應的是vue data 里面的某個數組,如:

data(){
    arr:[
    {
      圖
圖圖
    },
    {
      圖
    } ] }

假設這個時候我們點擊第一個BOX里面的圖片上傳,然后拿到對應的對調參數,(response,file,fileList)

說白了,我不知道該把這個fileList給誰處理,是this.arr[0] , 還是 this.arr[1]。

 

一般項目中處理這種類似問題的時候是把對應的item通過這個函數傳過來

如:

:on-success="handleProcedureSuccess(item)"

不過顯然不行,如果我傳實參了,那么組件內定義的幾個參數就過不來了,覆蓋了;

然后我就想這,我非得把當前item給傳到這個方法里去,不然沒法操作。

無奈····,改改改,經過我努力搜尋發現要修改這個文件

在項目里面找到node_modules/element-ui/lib/element-ui.common.js

我們在props里面加一個要父組件傳過來的參數,隨便叫啥啦

然后繼續往下找到,this.onSuccess的執行地點,加上這個參數

 

好了這里改好了,再到我們的頁面里,寫組件的時候多傳個參數,我這里傳的是數組的索引

 

 OK啦,再然后在success回調的時候就會多出一個參數,就是我們傳進去這個自定義的值啦

由此,用第四個參數去決定你處理的是第幾個數組元素。

 

搞定~~~~

=========================華麗的分割線==============================

后面想了想還是不應該通過這種方式去解決問題,為什么呢,因為你要去修改包文件才能夠達到

想要的效果,那么就會導致下次部署項目環境的時候也需要改,或者其他同事協同工作的時候還

需要他也去改一下才能正常運行····so,不合理。

后面又想到一個解決方案就是自己對它的upload組件進行二次封裝,我們不動他自己的代碼,只

是在調用自己upload組件的時候多傳一個參數,然后在執行回調的時候返回回來即可,好了直接

上圖:最它做了一個簡單的封裝

 

======================== 引用網友的解決方案,更方便一些,  ================================

很久沒關注博客園了不好意思,看大家都有這樣的困擾,直接把網友提供的簡單方案貼出來吧

 

我之前的解決辦法可能有些繞,有些人沒看明白,這里就直接借用評論里的解決方案了,

出現這個問題的核心是多個上傳組件無法與 data 一一關聯,我們可以在時間綁定的時候就把所以進行關聯

:on-success="(res)=>{ return handleSuccess(res, index)}"

 

這里的Index也就是我們想要自定義的參數了,這個數據與 data 里面的內容相對應,

因為你的上傳組件可以根據 data 里面的數組輸出,那么對應的數組的索引也可以拿到,

所以在上傳成功回調的同時,通過索引參數就能准確判斷對應的是哪一塊數據了,

希望對你們有幫助。

 

 

好啦,正確的解決思路引導


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM