watch监听input值

1.监听自定义3个input框值

 watch: {
            'remindForm.customTimeD'(val){
                this.remindInterval = Number(val) * 1440 + Number(this.remindForm.customTimeH) * 60 + Number(this.remindForm.customTimeM);
                console.log(this.remindInterval);
            },

            'remindForm.customTimeH'(h){
                this.remindInterval = Number(this.remindForm.customTimeD) * 1440 + Number(h) * 60 + Number(this.remindForm.customTimeM);
                console.log(this.remindInterval);
            },

            'remindForm.customTimeM'(m){
                this.remindInterval = Number(this.remindForm.customTimeD) * 1440 + Number(this.remindForm.customTimeH) * 60 + Number(m);
                console.log(this.remindInterval);
            },
        }

2.选中自定义的时候放数据里面

getRemindTime(item) {
                this.remindForm.remindIntervalList=[];
                if(item.remindType==0){ //无提醒
                    this.remindForm.remindIntervalList=item.dicts[0].label;
                }else if(item.remindType==1){ //立即提醒
                    this.remindForm.remindIntervalList=item.dicts[0].label;
                }else{ //多选
                    this.remindForm.remindIntervalList=item
                }
                //是否显示自定义
                if(this.remindForm.remindIntervalList.indexOf('custom')!=-1){
                    this.customTimeFlag =true;
                }else{
                    this.customTimeFlag =false;
                }
            },

3.结构

<el-form-item label="设置提醒" prop="type" style="clear:both;" class="require-label">
                        <el-radio-group v-model="remindForm.remindType">
                            <el-radio :label="0" border @change="changeRemindType" >无提醒</el-radio>
                            <el-radio :label="1" border @change="changeRemindType" >立即提醒</el-radio>
                            <el-radio :label="2" border @change="changeRemindType" >多选</el-radio>
                        </el-radio-group>
                 </el-form-item>
                <div  v-for="(item,index) in myRemindList"
                      :key="index">
                        <!--无提醒-->
                        <div class="clear" v-if="item.remindType==0&&showNoRemind" >
                            <el-form-item prop="remindIntervalList" class="item-form-3 require-label">
                                <el-select v-model="noRemind"   placeholder="请选择" @change="getRemindTime(item)">
                                    <el-option v-for="(option,index) in item.dicts"
                                               :key="option.dictName+index"
                                               :label="option.dictName"
                                               :value="option.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!--立即提醒-->
                        <div class="clear" v-if="item.remindType==1&&showImmediatelyRemind">
                            <el-form-item class="item-form-3 require-label">
                                <el-select v-model="immediatelyRemind" placeholder="请选择"  @change="getRemindTime(item)">
                                    <el-option v-for="(option,index) in item.dicts"
                                               :key="option.dictName + index"
                                               :label="option.dictName"
                                               :value="option.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!--多选提醒（自定义）-->
                        <div class="clear" v-if="item.remindType==2&&showMoreRemind">
                            <el-form-item class="item-form-3 require-label">
                                <el-select v-model="moreRemind" placeholder="请选择" multiple  collapse-tags  clearable @change="getRemindTime">
                                    <el-option v-for="(option,index) in item.dicts"
                                               :key="option.dictName + index"
                                               :label="option.dictName"
                                               :value="option.label">
                                    </el-option>
                                    <el-option value="custom" label="自定义" v-if="isCustom===true"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="提前" class="item-form-4 mr-80" v-if="customTimeFlag===true">
                                <div class="customTimeInput">
                                    <el-input v-model.number="remindForm.customTimeD" style="padding:0 5px; width: 80px;"></el-input>
                                    天
                                    <el-input v-model.number="remindForm.customTimeH" style="padding:0 5px; width: 80px;"></el-input>
                                    小时
                                    <el-input v-model.numder="remindForm.customTimeM" style="padding:0 5px; width: 80px;"></el-input>
                                    分钟
                                </div>
                            </el-form-item>
                        </div>
                </div>

4.在保存的时候校验input是否有值，并且保存的时候把监听到的值替换自定义custom这个字段

  //校验自定义是否填写
                if(this.remindForm.remindIntervalList.indexOf('custom')!=-1){
                    if(!this.remindInterval||this.remindInterval===0) return this.$message.error('请填写自定义！');
                }else{
                    this.remindInterval=0
                }

  //自定义时间监听的到值this.remindInterval替换数组中custom自定义添加给传给后台的数组中
                for (let i =0; i<this.remindForm.remindIntervalList.length;i++){
                    if(this.remindForm.remindIntervalList[i] === 'custom'){
                        this.remindForm.remindIntervalList.splice(i,1,this.remindInterval);
                    }
                }