Element

Element 提 bug 模板

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  
    <el-form :model="MainForm" ref="MainForm" label-width="120px" class="demo-dynamic">

        <el-form-item
          v-for="(domain, index) in MainForm.dynamicValidateForm.domains"
          :label="'Domain' + index"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="rules"
        >
          <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('MainForm')">Submit</el-button>
          <el-button @click="addDomain">New domain</el-button>
          <el-button @click="resetForm('MainForm.dynamicValidateForm')">Reset</el-button>
        </el-form-item>
        
    </el-form>
                
</div>

CSS

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");

JavaScript

new Vue({
  el: '#app',

    data: {

    MainForm:
    {
      dynamicValidateForm: {
        domains: [{
          key: 1,
          value: ''
        }],
      },
    },  

  rules: {
      value: [
        { required: true, message: 'Please input'},
      ],


    }
},

methods: {
 submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },

  addDomain() {
    this.MainForm.dynamicValidateForm.domains.push({
      key: Date.now(),
      value: ''
    });
  },

Validate(formName) {
this.$refs[formName].validate((valid) => {
  if (valid) {
    alert('submit!');
  } else {
    console.log('error submit!!');
    return false;
  }
});
},



        }

})