天天看點

Vue(element-ui在dialog中回顯el-upload照片問題)

      以下是我想要的效果,如果使用者之前上傳過專業資質,那dialog打開預設有使用者之前上傳過的圖檔,如果未上傳過圖檔,那麼打開是一個上傳圖檔的入口,最多上傳五張圖檔,上傳到第五張圖檔時隐藏上傳圖檔入口。

Vue(element-ui在dialog中回顯el-upload照片問題)

首先是預設顯示圖檔:

    1) 在el-upload中添加:file-list屬性,這個屬性綁定的值就是要回顯的圖檔

Vue(element-ui在dialog中回顯el-upload照片問題)

2)我這裡的圖檔url是背景給的,通過周遊得到每一張圖檔的url,并給它們添加url屬性

Vue(element-ui在dialog中回顯el-upload照片問題)

在關閉dialog後需要清除一下this.certificate

Vue(element-ui在dialog中回顯el-upload照片問題)
Vue(element-ui在dialog中回顯el-upload照片問題)

3)注意this.certificate是長這個樣子的:

Vue(element-ui在dialog中回顯el-upload照片問題)

4)這時圖檔回顯已經完成了,下面說上傳五張隐藏入口的實作:

 在data return中定義limit為5,hideUpload為false,并在el-upload的上一級綁定類名

Vue(element-ui在dialog中回顯el-upload照片問題)

在這兩個事件中都需要加上下面這一句:

Vue(element-ui在dialog中回顯el-upload照片問題)

在style中:

Vue(element-ui在dialog中回顯el-upload照片問題)

      注意:如果使用者之前就上傳了五張圖檔,那麼在預設打開dialog時圖檔上傳入口就應該隐藏,需要在打開時判斷圖檔的個數,等于5的話,就設定this.hideUpload為true(在第二步的代碼中有寫)