element-ui table 多行多列上传图片

347 阅读1分钟

//表格每行每列都有上传图片入口 image.png

image.png

//上传图片弹窗(刷新组件,重载组件:key="timer")

image.png

//打开对话框,定义全局变量暂存每行每列的数据

upload(row, type) {
    if(row.fileList.length!==0){
    **//type是第几列**
        switch(type){
          case 1:
            this.fileList = Object.assign([],row.fileList)
            break;
          case 2:
            this.fileList = Object.assign([],row.fileList1)
          break;
          case 3:
            this.fileList = Object.assign([],row.fileList2)
          break;
        }
    }
}

//关闭的时候清空数据

closePic(){
      this.timer = new Date().getTime()
      this.uploadType=0
      this.$refs.uploadfiles.clearFiles();
      this.fileList=[]
}

//上传图片

handleAvatarSuccess(response, file, fileList) {
**//上传成功将数据push进对应的行列里**
  switch(this.uploadType){
      case 1:
         this.temoobj.fileList.push({  url:  URL.createObjectURL(file.raw) })  
        break;
    }  
}