使用Elementui元素动态增减表单组件

需求：动态增减表单组件

动态表单组件

模板部分

<el-form :rules="dynamicRules" ref="dynamicForm" label-width="140px" class="demo-dynamic" :inline="true" v-for="(item,index) in dynamicInfo" :key="index" :model="item" >
   <el-form-item  v-if="dynamicInfo.length > 1"  class="removebutton">
     <el-button size="small" type="danger" @click.prevent="remove(item, index)">移除</el-button>
   </el-form-item>
   <el-form-item prop="name" label="名称">
     <el-input maxlength="32" v-model="item.name" placeholder=""></el-input>
   </el-form-item>
   <el-form-item label="类别" prop="type">
     <el-select placeholder="请选择" v-model="item.type" size="small" clearable>
       <el-option v-for="(item, index) in types" :key="index" :label="item.label" :value="item.value"></el-option>
     </el-select>
   </el-form-item>
 </el-form>

JS部分

export default {
  props: {
    value: Array
  },
  data() {
    return {
      dynamicInfo: [{
        name: '',
        type: ''
      }],
      dynamicRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类别', trigger: 'change' }]
      }
    }
  },
  mounted() {
    if (this.value) {
      this.dynamicInfo = this.value
    }
  },
  methods: {
    validateForm(formName) {
      let returnValue
      // 多个表单，所以验证时需要遍历
      this.$refs[formName].forEach(item => {
        item.validate((valid) => {
          if (valid) {
            returnValue = true
          } else {
            returnValue = false
          }
        })
      })
      return returnValue
    },
    resetForm(formName) {
    // 多个表单，所以验证时需要遍历
      this.$refs[formName].forEach(item => {
        item.resetFields()
      })
    },
    remove(item, index) {
      if (this.dynamicInfo.length > 1) {
          this.dynamicInfo.splice(index, 1)
      }
    },
    add() {
      this.dynamicInfo.push({
        name: '',
        type: ''
      })
    }
  },
  watch: {
    value: {
      handler(data) {
        this.dynamicInfo = this.value
      },
      deep: true
    },
    dynamicInfo: {
      handler(data) {
        this.$emit('input', this.dynamicInfo)
      },
      deep: true
    }
  }
}

使用动态表单组件

<account-form ref="accountInfo" v-model="dynamicInfo" />

...
data() {
    return {
      dynamicInfo: []
    }
}
...