vue + elementUI se da cuenta de la adición dinámica de elementos de formulario y la adición de validación

vue + elementUI se da cuenta de la adición dinámica de elementos de formulario y la adición de validación

 

Consulte el sitio web oficial de elementUI y otra información en Internet. No hay mucho que decir, solo publique el código.
parte htmt:

<el-form :model="environmentForm" ref="environmentForm">              
        <el-row :gutter="24"
           v-for="(item, index) in environmentForm.items" 
           :key="item.key"
         >
           <el-col :span="6">                 
             <el-form-item              
               :prop="'items.' + index + '.name'"
               :rules="{required: true, message: '名称不能为空', trigger: 'blur'}"                                                     
               >
               <el-input v-model="item.name"></el-input>
             </el-form-item>                  
           </el-col>              
           <el-col :span="6">                  
             <el-form-item              
               :prop="'items.' + index + '.variable'"
               :rules="{required: true, message: '变量值不能为空', trigger: 'blur'}"                                                     
               >
               <el-input v-model="item.variable"></el-input>
             </el-form-item>                  
           </el-col>
           <el-col :span="6">
             <el-form-item              
               :prop="'items.' + index + '.description'"
               :rules="{required: true, message: '描述不能为空', trigger: 'blur'}"                                                     
               >
               <el-input type="textarea" :rows="1" v-model="item.description"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="3" v-if="environmentForm.items.length !== 1" >
             <i  @click="removeEnvironmentForm(item)" 
                 style="font-size:28px;cursor:pointer;"
                 class="el-icon-delete"></i>
           </el-col>
           <el-col :span="3" >
             <el-button @click="addEnvironmentForm" size="mini" class="el-icon-plus"></el-button>
           </el-col>
         </el-row>               
         
         <el-form-item>
           <el-button type="primary" @click="submitForm('environmentForm')">提交</el-button>                
           <el-button @click="resetForm('environmentForm')">重置</el-button>
         </el-form-item>
       </el-form>

js parte:

<script>
export default {
  data () {
    return {
      environmentForm: {
        items: [{
          name: '',
          variable: '',
          description: ''
        }]
      }
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('提交',this.environmentForm);
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeEnvironmentForm(item) {   
        var index = this.environmentForm.items.indexOf(item)
        if (index !== -1) {
          this.environmentForm.items.splice(index, 1)
        }    
      },
      addEnvironmentForm() {
        this.environmentForm.items.push({
          name: '',
          variable: '',
          description: '',
          key: Date.now()
        });
      },
      }
      }
      </script>

El efecto es el siguiente: cuando solo hay una fila, el botón de eliminar está oculto.