<el-form ref="form" :model="form" label-width="85px" :loading="formLoading" :rules="rules">
<el-row>
<el-col :span="24">
<el-form-item label="请假类型" prop="leave_type">
<el-select v-model="form.leave_type" clearable :disabled="pageType==='watch'" placeholder="请选择">
<el-option
v-for="dict in leaveTask"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
<div v-for="(item,index) in form.mpLeaveSons" :key="index">
<el-col :span="10">
<el-form-item label="开始时间" :prop="`mpLeaveSons[${index}].start_time`" :rules="rules.start_time">
<el-date-picker
:disabled="pageType==='watch'"
v-model="item.start_time"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="选择日期"
clearable
@change="(e)=>dateSelectStart(e,item,index)"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上午/下午" :prop="`mpLeaveSons[${index}].start_type`" :rules="rules.start_type">
<el-select v-model="item.start_type" clearable :disabled="pageType==='watch'" placeholder="请选择" @change="selectTypeStart">
<el-option
v-for="item in sky"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="结束时间" :prop="`mpLeaveSons[${index}].end_time`" :rules="rules.end_time">
<el-date-picker
:disabled="pageType==='watch'"
v-model="item.end_time"
value-format="yyyy-MM-dd"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期"
clearable
@change="(e)=>dateSelectEnd(e,item,index)"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上午/下午" :prop="`mpLeaveSons[${index}].end_type`" :rules="rules.end_type">
<el-select v-model="item.end_type" clearable :disabled="pageType==='watch'" placeholder="请选择" @change="selectTypeEnd">
<el-option
v-for="item in sky"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="请假时长" prop="duration">
<el-input
style="width: 220px;"
:disabled="pageType==='watch'"
v-model="item.duration"
clearable
>
<template slot="append">天</template>
</el-input>
</el-form-item>
</el-col>
</div>
<el-col :span="24" v-if="pageType!=='watch'">
<el-form-item label="" prop="project_name">
<el-button style="width: 100px;" :disabled="pageType==='watch'" type="primary" icon="el-icon-plus" @click="addLeave"></el-button>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="请假总时长" prop="duration">
<el-input
:disabled="pageType==='watch'"
v-model="form.duration"
clearable
>
<template slot="append">天</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="原因" prop="reason">
<el-input
type="textarea"
:disabled="pageType==='watch'"
:autosize="{ minRows: 2 }"
v-model="form.reason"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="notes">
<el-input
type="textarea"
:disabled="pageType==='watch'"
:autosize="{ minRows: 4 }"
v-model="form.notes"
placeholder="请输入"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
// 表单参数 需要验证的数组需要在form内才可以
form: {
mpLeaveSons: [
{
start_time:'',
end_time:'',
start_type:'',
end_type:'',
duration:''
}
]
},
rules: {
leave_type: [
{ required: true, message: '请选择请假类型', trigger: 'blur' },
],
start_time:[
{ required: true, message: '请选择开始时间', trigger: 'blur' },
],
end_time:[
{ required: true, message: '请选择结束时间', trigger: 'blur' },
],
start_type:[
{ required: true, message: '请选择上午/下午时间段', trigger: 'blur' },
],
end_type:[
{ required: true, message: '请选择上午/下午时间段', trigger: 'blur' },
],
},
然后就可以在方法内，this.$refs.form.validate((valid) 和if (valid)
