vue使用element-ui组件时v-for循环el-upload表单项验证

责编:menVScode 2018-09-18 15:58 阅读(323)

有这么一个需要:需要动态生成不限数量的商标组表单,如下所示:


<div class="brandList" v-for="(item,index) in shopForm.trademrakListObj" :key='index'>
    <el-form-item label="商标类型:" class="line"">
        <el-radio-group v-model="item.trademrakType">
            <el-radio :label="0">授权商标</el-radio>
            <el-radio :label="1">自有商标</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item
        label="商标注册号:"
        :prop="'trademrakListObj.' + index + '.trademrakRegistcode'"
        :rules="{ required: true, message: '商标注册号不能为空', trigger: 'blur' }"
        class="line">
        <el-input v-model="item.trademrakRegistcode" class="inputBox"></el-input>
    </el-form-item>
    <el-form-item
        label="商标注册证明:"
        :prop="'trademrakListObj.' + index + '.trademrakRegistUrl'"
        :rules="[ { required: true, message: '请上传图片', trigger: 'change', validator: ''} ]"
        class="line">
        <el-upload
            class="avatar-uploader"
            action="/shop/upload/uploadFile"
            :show-file-list="false"
            :on-success="trademrakRegistSuccess.bind(null, {'index':index,'data':item})"
            :before-upload="beforeAvatarUpload">
             <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <img :src="item.trademrakRegistUrl" @click="checkBigImg($event)" class="avatar">
    </el-form-item>
    <el-form-item
        label="品牌授权证明:"
        prop="brandAuthUrl"
        class="line"
        :prop="'trademrakListObj.' + index + '.brandAuthUrl'"
        :rules="[ { required: true, message: '请上传图片', trigger: 'change', validator: ''} ]"
        v-show="item.trademrakType==0">
        <el-upload
            class="avatar-uploader"
            action="/shop/upload/uploadFile"
            :show-file-list="false"
            :on-success="brandAuthSuccess.bind(null, {'index':index,'data':item})"
            :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <img :src="item.brandAuthUrl" @click="checkBigImg($event)" class="avatar">
    </el-form-item>
    <el-form-item class="line" v-if="shopForm.trademrakListObj.length!=1">
        <el-button @click.prevent="removeBrand(item)">删除</el-button>
    </el-form-item>
</div>

//

//统一上传图片函数
beforeAvatarUpload(file) {
    const isJPG = file.type.includes('jpg');
    const isJPEG = file.type.includes('jpeg');
    const isPNG = file.type.includes('png');
    const isLt2M = file.size / 1024 / 1024 < 5;
    if(!isJPG && !isJPEG && !isPNG){
        this.$message.error('请上传jpg,png格式的图片');
    }
    if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
    }
    // return isJPG && isLt2M ;
    return isLt2M && (isJPEG || isPNG || isJPG);
},
//商标
trademrakRegistSuccess(obj,res,file) {
    var index = this.shopForm.trademrakListObj.indexOf(obj.data)
    this.shopForm.trademrakListObj[index].trademrakRegistUrl = res.url
},
brandAuthSuccess(obj,res,file) {
    var index = this.shopForm.trademrakListObj.indexOf(obj.data)
    this.$set(this.shopForm.trademrakListObj[index],'brandAuthUrl',res.url)
},
//食品经营许可证:
licenseSuccess(obj,res,file) {
    var index = this.shopForm.licenseListObj.indexOf(obj.data)
    this.$set(this.shopForm.licenseListObj[index],'licenseUrl',res.url)
},
//删除/增加商标
removeBrand(item) {
    var index = this.shopForm.trademrakListObj.indexOf(item)
    if (index !== -1) {
        this.shopForm.trademrakListObj.splice(index, 1)
    }
},
addBrand() {
    this.shopForm.trademrakListObj.push({
        trademrakType:0,trademrakRegistcode:'',trademrakRegistUrl:'',BrandAuthUrl:'',time:new Date().getTime()
    });
},


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码