vue:自定義驗證form表單中的數組

vue:自定義驗證form表單中的數組

如圖

 

html寫法：

form元素: pictures

添加圖片上傳框事件：addMealImage
刪除一個圖片上傳框事件：delMealImage

div class="flex-row el-form-item-box"   style="width: 100%;">
        <el-form-item label="餐食主圖" prop="pictures"   style="width: 100%;" :required="true">
          <el-col  style="margin-left: 10px; float: left; width: 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();
      }

    };