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属性