vue:自定义验证form表单中的数组

vue:自定义验证form表单中的数组

如图

 

html写法：

form元素: pictures

添加图片上传框事件：addMealImage
删除一个图片上传框事件：delMealImage

div class="flex-row el-form-item-box"   style=" 100%;">
        <el-form-item label="餐食主图" prop="pictures"   style=" 100%;" :required="true">
          <el-col  style="margin-left: 10px; float: left;  100px;" v-for="(item, index) in form.pictures" :key="index">
            <el-upload
              name="picFile"
              ref="resumeRefs"
              :headers="header"
              class="avatar-uploader"
              :action="baseURL + '/system/meal/upload/0/'+ mealId+'/'+index+''"
              :show-file-list="false"
              :auto-upload="true"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :disabled="mealEdit">
              <img v-if="form.pictures[index].mealImage" :src="form.pictures[index].mealImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span v-if="index == 0" class="add-date el-icon-circle-plus-outline" style="margin-left: 25px;" title="添加图片" @click="addMealImage"> </span>
            <span v-if="index > 0" class="add-date el-icon-remove-outline" style="margin-left: 25px;" title="删除图片" @click="delMealImage"> </span>
          </el-col>
        </el-form-item>

      </div>

　　

js部分

表单部分：给pictures初始化一个数组

// 表单参数
      form: {
        id: null,
        mealName: null,
        mealCode: null,
        mealPrice: null,
        mealValidityStart: null,
        mealValidityEnd: null,
        flightValidityStart: null,
        flightValidityEnd: null,
        mealContent: null,
        mealAirport: null,
        mealCompany: null,
        mealReceiveMail: null,

        mealReceiveMails: [],
        pictures:[{mealImageType: null, mealImage: null, id: null, index:null}], //上传图片
        delPictures: [],//删除的图片
      },

　　

rules部分：

  pictures: [
          {  type: "array", validator: validateMealPicture, required: true }
        ],

　　

自定义验证部分：

validateMealPicture

const validateMealPicture = (rule,value, callback)=>{
      //console.log(rule)
      //console.log(value)
      let item =  value.length>0?value[0]:null;
      if(item==null || (item!=null && item.id==null)){
        return callback(new Error("请至少上传一个图片"));
      }else{
        callback();
      }

    };