vue：⾃定义验证form表单中的数组vue:⾃定义验证form表单中的数组
vue逗号分割的字符串转数组
如图
html写法：
form元素: pictures
添加图⽚上传框事件：addMealImage
删除⼀个图⽚上传框事件：delMealImage
div class="flex-row el-form-item-box"  >
<el-form-item label="餐⾷主图" prop="pictures"  :required="true">
<el-col  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" title="添加图⽚" @click="addMealImage"> </span>            <span v-if="index > 0" class="add-date el-icon-remove-outline" 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();
}
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。