This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

💪~ If you like it, you can like it or leave a comment 💕~~~, thank you ⭐️ 💕 ️~~

Here is a summary of the problem of clicking buttons to add and delete a row of input boxes. The renderings are as follows:

There is a row of mandatory content, click the new row will add a new row, click the delete button after each row will delete the row. The implementation of consideration is to write a necessary form first, need to add the new form in a div, use V-for generation in div, to achieve the effect of simultaneous addition.

Dynamic Forms section

<div class="left_Box">
     <div class="btnTool" style="text-align:right;">
         <el-button type="primary" size="mini"@click="addDomain">The new line</el-button>
         <el-button type="primary" size="mini"@click="clear_btn('dynamicValidateForm')">empty</el-button>
         <el-button type="primary" size="mini"@click="submitForm('dynamicValidateForm')">Save as template</el-button>
     </div>
     <div>
         <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" :inline="true" class="demo_dynamic">
                <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="dv_hang" >
                  <el-form-item
                    :key="domain.key"
                    :prop="'domains.' + index + '.lx'"
                    :rules="{required: true, message: 'cannot be empty ', trigger: 'blur',}"
                  >
                    <label>State operator</label>
                    <el-select v-model="domain.lx" size="small">
                      <el-option label="Planned shutdown." value="PO"></el-option>
                      <el-option label="Unplanned shutdown." value="UO"></el-option>
                      <el-option label="Type I unplanned outages." value="UO1"></el-option>
                      <el-option label="Type II unplanned outage." value="UO2"></el-option>
                      <el-option label="Type 3 unplanned outages." value="UO3"></el-option>
                      <el-option label="Category 4 unplanned outages." value="UO4"></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item
                    :key="domain.key1"
                    :prop="'domains.' + index + '.qsfw'"
                    :rules="{required: true, message: 'cannot be empty ', trigger: 'blur',}"
                  >
                    <label>Time range</label>
                    <el-input-number v-model="domain.qsfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <! -- <el-input v-model="domain.qsfw" size="small"></el-input> -->
                  </el-form-item>
                  
                  <el-form-item
                    :key="domain.key2"
                    :prop="'domains.' + index + '.zzfw'"
                    :rules="{required: true, message: 'cannot be empty ', trigger: 'blur',}"
                  >
                    <label>to</label>
                    <el-input-number v-model="domain.zzfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <! -- <el-input v-model="domain.zzfw" size="small"></el-input> -->
                  </el-form-item>

                  <el-form-item
                    :key="domain.key3"
                    :prop="'domains.' + index + '.zsxs'"
                    :rules="{required: true, message: 'cannot be empty ', trigger: 'blur',}"
                  >
                    <label>Reduced proportion</label>
                    <el-input-number v-model="domain.zsxs" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <! -- <el-input v-model="domain.zsxs" size="small"></el-input> -->
                    <el-button @click.prevent="removeDomain(domain)" size="small" class="delhang_class">Delete rows</el-button>
                  </el-form-item>
                </div>
           </el-form>
    　　</div>
</div>
Copy the code

Data definition section

export default {
  name: 'dynamicForm',
  data () {
    return{dynamicValidateForm: {
          domains: [{
            lx:' './ / state
            qsfw:' '.// Start range
            zzfw:' '.// Cutoff range
            zsxs:' '.// Convert the ratio}],},}}}Copy the code

Add method in methods

methods: {
          removeDomain(item) {/ / delete rows
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if(index ! = = -1) {
              this.dynamicValidateForm.domains.splice(index, 1)}},addDomain() {/ / new line
            this.dynamicValidateForm.domains.push({
              lx:' './ / state
              qsfw:' '.// Start range
              zzfw:' '.// Cutoff range
              zsxs:' '.// Convert the ratio
              key: Date.now()
            });
          },
          submitForm(formName) {// Save the button
            this.$refs[formName].validate((valid) = > {
              if (valid) {
                console.log(this.dynamicValidateForm.domains)
                this.savemoban(this.dynamicValidateForm.domains)
              } else {
                console.log('error submit!! ');
                return false; }}); },clear_btn(formName) {
            this.$refs[formName].resetFields();
          },
          savemoban(domainsdata){// Save as a template
            let params = {
              zsgs:domainsdata,
            };
            this.servicept
            .post("/sbdZhzbFx/saveCaclueFormula", params)
            .then((res) = > {
              if(res.data.msg=="Success") {this.$message.success("Success!);
              }else{
                this.$message.error("Failure!);
              }
            }).catch((res) = >{}); }},Copy the code

One thing to note:

Normal form validation items rely on prop, whereas dynamically generated forms use :prop

Prop =”‘domain.’ + index +’.lx'”, domain is the array bound by V-for, index is the index, lx is the name of the v-model bound by the form, and then use. Link them together.

Prop =”‘v-for bound array.’ + index + ‘. V -model bound variable ‘”

💕💕~ thank you for reading ⭐️⭐ ⭐️. If you like, you can click like or leave a comment

Comments on the lottery

Feel free to discuss in the comments section. The nuggets will be sending out 100 nuggets in the comments section after the diggnation campaign

  • Raffle gift: 100 pieces, including badges, slippers, mugs, canvas bags, etc., will be distributed at random

  • Drawing time: Within 3 working days after the end of project Diggnation, all articles that meet the rules will be officially posted in the comments section

  • Lucky draw: Nuggets official random draw + manual verification

  • Comment content: comments, suggestions and discussions related to the content of the article. General comments such as “treading on” and “learning” will not win the prize

Column recommended

Recommend their own column, welcome everyone to collect attention to 😊~

  • Set the interview
  • Native js set
  • Vue set
  • Visual set
  • CSS set