2021-08-16

ant of vue框架表单验证动态添加删除

在表单里的select根据选择状态动态给下面input添加删除 表单验证效果

page代码

          <a-col :span="24">
              <a-form-item label="巡检类型" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
                <a-select
                  @change="handleChange"
                  v-decorator="[
                    'type',
                    {
                      rules: [{ required: true, message: '请输入巡检类型' }],
                      initialValue: editCurrentRow.type == 1 ? '常规巡检' : '临时巡检',
                    },
                  ]"
                  placeholder="请输入巡检类型"
                >
                  <a-select-option :value="item.value" :key="item.value" v-for="item in checkingType">{{
                    item.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-row class="ant-wor" v-if="isShow">
              <a-col style="padding-left: 3.3%" :span="12">
                <a-form-item :label="'巡检周期'" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                  <a-select
                    v-decorator="[
                      'cycle',
                      {
                        rules: [
                          {
                            required: isShow,
                            message: '请输入巡检周期',
                          },
                        ],
                      },
                    ]"
                    @change="handlecycle"
                    placeholder="请输入巡检周期"
                  >
                    <a-select-option value="1"> 7天</a-select-option>
                    <a-select-option value="2"> 14天</a-select-option>
                    <a-select-option value="3"> 30天 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="3" class="zdy">
                <a-checkbox @change="onChange"> 自定义 </a-checkbox>
                <a-input
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  style="width: 50px"
                  v-model="adys"
                />
                <p style="padding-top: 4%; margin-left: 3%">天</p>
              </a-col>
            </a-row>





//vue data
isShow：false




//js
      this.$nextTick(() => {
        this.createPolicyForm.validateFields(['cycle'], { force: true }) //关键部分
        this.createPolicyForm.validateFields(['planContent'], { force: true })
      })