element ui

<el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange">
</el-table>
handleSelectionChange(val) {
    this.multipleSelection = val;
}
//单行取消选中

handelDel(index, row) {

this.$nextTick(function() {
    let findrow = this.tableData.find(d => d.id === row.id);
    if(findrow){
        this.$refs.multipleTable.toggleRowSelection(findrow, false);
    }
});

}

//所选行全部取消选中

handleBatchDel(){

this.$refs.multipleTable.clearSelection();

}

图片放大

<template slot="img-column" slot-scope="scope">
    <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" @click.native="onPreview(scope.$index, scope.row)"></el-image>
    <el-image-viewer src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :url-list="srcList" v-if="showViewer" :on-close="closeViewer"></el-image-viewer>
</template>
<script>
  export default {
    data() {
      return {
        srcList: [],
        showViewer: false
      }
    },
    methods: {
        onPreview() {
          this.srcList = [],
          this.srcList.push();
          this.showViewer = true;
        },
        // 关闭查看器
        closeViewer() {
          this.showViewer = false;
        }
      }
  }
</script>

<el-upload
    class="upload-demo"
    accept=".zip,.rar"
    :action="no"
    :http-request="httpRequest"
    ref="upload"
    :limit="1"
    :on-error="handleError"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-preview="handlePreview"
    :file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20Mb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      httpRequest(file) {
            this.loading(),
            console.log("httpRequest===========" + file);
            let a = new FormData;
            a.append("file", file.file),
            a.append("userId", this.currentLobNumber),
            axios({
                url: carpojs.frontParams.BASE_API_UPLOAD + "/upload",
                method: "post",
                headers: {
                    "Content-Type": "multipart/form-data"
                },
                data: a
            }).then((res=>{
                console.log("httpRequest===========" + res.data.data.data),
                this.loading.close(),
                if(res.data.data.code === 200){
                    this.qualificationDataProc.borrowerVoucher = res.data.data.data,
                    this.qualificationDataProc.borrowerVoucherName = file.file.name
                }
            }
            )).catch((e=>{
                console.log(e),
                //清空已上传文件
                this.$refs.upload.clearFiles(),
                this.loading.close()
            }
            ))
        },
        handleError(err, file, fileList) {
            console.log("handleError===========" + err, file, fileList),
            this.loadingObj.close()
        },
        handleRemove(file, fileList) {
            console.log("handleRemove===========" + file, fileList);
            let t = this;
            t.fileList = file,
            t.qualificationDataProc.borrowerVoucher = "",
            t.qualificationDataProc.borrowerVoucherName = ""
        },
        beforeUpload(file) {
            let fileSize = 20;
            let isLtMB = file.size / 1024 / 1024 < parseInt(fileSize);
            if(!isLtMB){
                this.$message({
                    message: "上传文件大小不能超过" + fileSize + "MB",
                    type: "error"
                });
                return false;
            }
            if(file.name.lastIndexOf(".") > 50){
                this.$message({
                    message: "文件名称最长不能超过50个字符",
                    type: "warning"
                });
                return false;
            }
            let findIndex = this.fileTypes.findIndex((item=>item.toLowerCase() === file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase()));
            if(findIndex < 0){
                this.$message.error("上传文件类型只能为zip, rar");
                return false;
            }
        },
        uploadLoading() {
            this.loadingObj = this.$loading({
                lock: !0,
                text: "上传中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.8)"
            })
        },
        handleChange(res, file) {
        
        },
        handleExceed(file, fileList) {
            this.$message({
                message: "最多可上传一个附件",
                type: "warning"
            })
        },
        handlePreview(file) {
            downLoadFile(file.url, file.name);
        }
    }
  }
</script>
public class fileController{
    @RequestMapping("/upload")
    @CrossOrigin(origins="*", allowCredentials = "true")
    public ResultObject upload(@RequestParam org.springframework.web.multipart.MultipartFilefile, HttpServletRequest request) {
    
    }
}

el-dialog中放置img图片不能实时刷新的问题

 
<template>
    <el-dialog>
        <img :src="pic"/>
    </el-dialog>
</template>
 
 
data(){
    return{
        pic: ''
    }
},
methods: {
    test() {
        //用的是base64编码格式 直接加载图片
        this.pic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
        //强制刷新
        this.$forceUpdate();
    },
}

el image-viewer 图片预览组件
<template>
  <span>
    <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" @click="onPreview">预览</el-image>
    <el-image-viewer src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
  </span>
</template>
<script>
  // 导入组件
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
   
  export default {
   components: { ElImageViewer },
   data() {
    return {
     showViewer: false,
     srcList: []
    }
   },
   methods: {
    onPreview() {
      this.srcList = [];
      this.srcList.push('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg');
      this.showViewer = true;
    },
    // 关闭查看器
    closeViewer() {
      this.srcList = [];
      this.showViewer = false;
    }
   }
</script>