最近项目需要做巡检相关的功能，用到的表单表格比较多，加上各种验证快玩出了花，倒不是难，就是挺繁琐的，记录一下比较基础的写法。
1.表单嵌套表格的验证：
如图，表单被分为了一个可以动态增减的表格和普通的表单两部分，且表格是遍历出来的，内容是必选项，这样验证项目必须要直接写在遍历的地方，表格的增删就不说了直接push和splice就好，废话不说，上代码
基础信息
label-width="100px"
label="班次名称："
prop="name"
>
label-width="100px"
label=""
prop="cycle_days"
>
每天为一个单次循环周期
班次表
:data="form.patrol_scheme_details"
header-row-class-name="table-head"
row-class-name="table-body"
stripe
>
label="天数"
>
:prop="'patrol_scheme_details.' + scope.$index+ '.scheme_day'"
:rules="{
required: true, message: '请选择', trigger: 'change'
}"
>
v-for="item in dayOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
:prop="'patrol_scheme_details.' + scope.$index+ '.time_slot'"
:rules="{
required: true, message: '请选择', trigger: 'change'
}"
>
v-for="item in slotOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
:prop="'patrol_scheme_details.' + scope.$index+ '.persons'"
:rules="{
required: true, message: '请选择', trigger: 'change'
}"
>
v-for="item in userOption"
:key="item.id"
:label="item.full_name ? item.full_name : item.username"
:value="item.id"
/>
v-if="$route.meta.privileges.includes('Edit')"
prop="op"
label="操作"
width="80"
>
删除
class="add-button"
@click="addRow()"
>
单次循环班次
export default {
data() {
return {
form: {
'name': '', // 必须，班次名字
'cycle_days': 1, // 循环周期，天数
'patrol_scheme_details': [
{
'scheme_day': 1, // 第几天，排版日
'time_slot': '', // 排版时段，选择项
'persons': [] // 巡检人ID列表,多选数组
}
]
},
rules: {
name: [{ required: true, message: '请输入', trigger: 'blur' }],
cycle_days: [{ required: true, message: '请输入', trigger: 'blur' }]
},
slotOption: [],
userOption: []
}
},
}
其实主要看这几句就可以
这样动态验证就完成了。
2.时间选择器限制
两个时间选择器，第一个只能选今天及以后的日期范围，第二个只能选第一个选的日期范围中的日期。
只能选今天及以后，第一个选了10-15号
label="起止时间："
>
v-model="form.schemeDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
format="yyyy-MM-dd"
:clearable="false"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions2"
/>
pickerOptions2: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
}
}
只能从10-15号中选一天
v-model="scope.row.scheme_date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
:clearable="false"
:picker-options="pickerOptions"
/>
computed: {
pickerOptions() {
var self = this
return {
disabledDate(time) {
return time.getTime() < new Date(self.form.schemeDate[0]).getTime() - 8.64e7 || time.getTime() > new Date(self.form.schemeDate[1]).getTime()
}
}
},
}
