Element UI 表单校验踩过的坑

1、prop的值，必须是表单绑定v-model下面的值才生效

如：

   
           

   

this.$refs.formData.xx

2、多个el-upload控件的上传图片尺寸、大小校验

官方文档中提供：before-upload文件上传之前、on-success文上传成功回调事件

before-upload="handleBeforeUpload"  on-success="handleUploadSuccess"

但多个Upload情况下，需要操作具体个数，在事件中返回index：

before-upload="(res, file) => {return handleBeforeUpload(res, file, index)}"

on-success="(res, file) => {return handleUploadSuccess(res, file, index)}"

handleBeforeUpload(file, res, index) {

console.log(res, file, index)

// accept声明的上传文件类型，accept=image/png，image/jpg（png、jpg可大写）

mac下，打开文件时过滤了非声明类型，

但window下无效，以下为兼容代码

}

handleUploadSuccess(res, file, index) {

    if (res.code === 0 && res.data && res.data.url) {

            this.imageUrl = res.data.url

    }

}

3、input数字检验

type:number…