July 22, 2019 Because of business needs to make a form to add a page popup box, some people may say that is not very simple. Here’s the point

 <el-form-item label="Active area" prop="region">
    <el-select v-model="ruleForm.region" placeholder="Please select the active area.">
      <el-option label="Zone one" value="shanghai"></el-option>
      <el-option label="Area two" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="Active Time" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="Select date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="Choose the time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="Instant delivery" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="Nature of activity" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="Food/Restaurant Online Activities" name="type"></el-checkbox>
      <el-checkbox label="Ground pushing activity" name="type"></el-checkbox>
      <el-checkbox label="Offline Themed Activities" name="type"></el-checkbox>
      <el-checkbox label="Pure brand exposure" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="Special Resources" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="Online Brand Sponsorship"></el-radio>
      <el-radio label="Offline venue free"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="Form of activity" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')"</el-button> <el-button @click="resetForm('ruleForm')"</el-form> </el-form> </el-form>Copy the code

So here’s an example from the official website of a form with a require prompt that you have to type in,

! [] (

Each horizontal line is an el-Form-item prop binding and the value is fixed,

So now I have a requirement that I have two El-Raido buttons and a button with an input box and I can only enter the value of my input box when I fire my second radio button

The important thing to say three times is that you can’t drink two radios into the same el-form-Item and if you do that you’re going to close the popup and reset the form and find that your input can’t be reset anyway,

This is the pit I ran into today for the record