美文网首页
Element UI 表单校验踩过的坑

Element UI 表单校验踩过的坑

作者: 大T的随手记 | 来源:发表于2019-12-25 23:13 被阅读0次

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

如:

<el-form ref="formData" :model="formData">

    <el-form-item label="内容名称" prop="name">
            <el-input v-model="formData.name" maxlength="30" show-word-limit></el-input>

    </el-form-item>

<el-form>

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…

相关文章

网友评论

      本文标题:Element UI 表单校验踩过的坑

      本文链接:https://www.haomeiwen.com/subject/lnyhoctx.html