render函式處理動態獲取img的src屬性

問題描述: 用iview的上傳檔案Upload元件寫動態新增圖片,可以拿到返回的圖片路徑,賦值給img的src時一直為空

---

1, 效果圖,佈局程式碼沒貼上

2, 實現效果,點選上傳按鈕上傳圖片成功之後把圖片顯示出來

{
        title: '產品圖片',
        key: 'filePath',
        render: (h, params) => {
            return h('div', [
              h('Upload', {
                props: {
                  ref: 'upload',
                  type: 'drag',
                  showUploadList: false,
                  onSuccess: (res, file) => { // 上傳方法要寫在這裡面,對應每一行的資料
                    if (file && file.response.result) {
                      let files = file.response.result[0].link // 上傳成功之後獲取的圖片路徑
                      // params.row.filePath = files //1: 點選上傳成功之後,獲取的圖片路徑,可以拿到值,但是這樣賦值給不到img的src
                      this.$set(params.row, 'filePath', files) // 2: 必須這樣寫,用vue的set方法
                    }
                  },
                  action: 'http://XXXXXXX/UploadFile' // 上傳圖片路徑
                }
              }),
              h('img', {
                style: {
                  width: '100%',
                  height: '100%',
                  borderRadius: '4px'
                },
                attrs: {
                  src: params.row.filePath // 如果是1那種寫法,不能實時獲取,獲取的還是undefined
                }
              })
            ])
          }
      }
複製程式碼

3, Vue.set( target, key, value )方法: Vue.set

    1,Vue.set( target, key, value ) 是全域性註冊
    
    2,this.$set( target, key, value ) 是區域性註冊
複製程式碼

備註: 如有問題,歡迎指正

本文為原創,如需轉載請註明出處: render函式處理img的src屬性