以下是我想要的效果,如果使用者之前上傳過專業資質,那dialog打開預設有使用者之前上傳過的圖檔,如果未上傳過圖檔,那麼打開是一個上傳圖檔的入口,最多上傳五張圖檔,上傳到第五張圖檔時隐藏上傳圖檔入口。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TTU1EMBRlY0B3MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLyAjMwAjMxATM0ATOwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
首先是預設顯示圖檔:
1) 在el-upload中添加:file-list屬性,這個屬性綁定的值就是要回顯的圖檔
2)我這裡的圖檔url是背景給的,通過周遊得到每一張圖檔的url,并給它們添加url屬性
在關閉dialog後需要清除一下this.certificate
3)注意this.certificate是長這個樣子的:
4)這時圖檔回顯已經完成了,下面說上傳五張隐藏入口的實作:
在data return中定義limit為5,hideUpload為false,并在el-upload的上一級綁定類名
在這兩個事件中都需要加上下面這一句:
在style中:
注意:如果使用者之前就上傳了五張圖檔,那麼在預設打開dialog時圖檔上傳入口就應該隐藏,需要在打開時判斷圖檔的個數,等于5的話,就設定this.hideUpload為true(在第二步的代碼中有寫)