web前端-el-form-item表单动态设置prop，rules

Posted 2021-12-29 MinggeQingchun

绑定动态变量 :prop，:rules

        <!--开始时间；结束时间-->
        <el-form-item label="时间" :prop="classDateType" :rules="rules.classDateTypeRule">
          <el-date-picker clearable size="small" style="width:380px"
            v-model="classDateValue"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>

声明变量

data() 
    return 
      //时间类型：begintime-开始时间；endtime-结束时间
      classDateType:"",
      //时间类型值
      classDateValue:null,

      // 表单校验
      rules: 
        //开始结束时间
        classDateTypeRule: [
          // required: true, message: "开始结束时间不能为空", trigger: "blur" 
          
            required: true,
            validator: this.dateRequired,
            trigger: "blur"
          
        ]
      
    

动态修改值

methods: 
    //开始班次
    handleBeginClass() 
        this.classDateType = "begintime";
    ,

    //结束
    handleEndCLass() 
      this.classDateType = "endtime";
    ,

    //时间的验证卡控
    dateRequired(rule, value, callback) 
      console.log("dateRequired时间的验证卡控rule" + rule + "-- value：：" + value + " -- callback" + callback);
      if (value) 

       else 

      
      callback();