elementUI 表单嵌套表格验证,日期选择器联动限制等写法

最近项目需要做巡检相关的功能，用到的表单表格比较多，加上各种验证快玩出了花，倒不是难，就是挺繁琐的，记录一下比较基础的写法。

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.时间选择器限制

两个时间选择器，第一个只能选今天及以后的日期范围，第二个只能选第一个选的日期范围中的日期。

只能选今天及以后，第一个选了10-15号

 pickerOptions2: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }

只能从10-15号中选一天

 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()
        }
      }
    },
}