作者:静净精时 | 来源:互联网 | 2023-09-10 09:45
最近项目需要做巡检相关的功能,用到的表单表格比较多,加上各种验证快玩出了花,倒不是难,就是挺繁琐的,记录一下比较基础的写法。
1.表单嵌套表格的验证:
如图,表单被分为了一个可以动态增减的表格和普通的表单两部分,且表格是遍历出来的,内容是必选项,这样验证项目必须要直接写在遍历的地方,表格的增删就不说了直接push和splice就好,废话不说,上代码
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.时间选择器限制
两个时间选择器,第一个只能选今天及以后的日期范围,第二个只能选第一个选的日期范围中的日期。
pickerOptions2: {
disabledDate(time) {
return time.getTime()
computed: {
pickerOptions() {
var self = this
return {
disabledDate(time) {
return time.getTime() new Date(self.form.schemeDate[1]).getTime()
}
}
},
}