vue+elementui 动态增减表单

vue+elementui 动态增减表单

<template>
	<div v-for="(item, index) in dataForm.domains">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-form-item
                  label="内容"
                  :key="item.key"
                  :prop="'domains.' + index + '.value'"
                  :rules="{
                      required: true, message: '内容不能为空', trigger: 'blur'
                  }">
                  <el-input  v-model="item.value" placeholder="内容"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="模式"
                  :key="item.key"
                  :prop="'domains.' + index + '.value1'"
                  :rules="{
                      required: true, message: '模式不能为空', trigger: 'blur'
                  }">
                  <el-input  v-model="item.value1" placeholder="模式"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="课时"
                  :key="item.key"
                  :prop="'domains.' + index + '.value2'"
                  :rules="{
                      required: true, message: '课时不能为空', trigger: 'blur'
                  }">
                  <el-input  v-model="item.value2" placeholder="课时"></ell-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin-top: 37px">
                <el-button @click="addDomain" icon="el-icon-plus" circle v-if="dataForm.domains.length<14"></el-button>
                <el-button @click.prevent="removeDomain(item)" icon="el-icon-minus" circle
                           v-if="dataForm.domains.length>1"></el-button>
              </el-col>
            </el-row>
          </div>
</template>
<script>
    export default {
    	data() {
      		return {
            	 dataForm: {
          			domains: [{
           			value: '',
           		 	value1: '',
            		value2: '',
         		 	}],
        		 },
        	}
    	},
        methods: {
            //减号
      		removeDomain(item) {
        		var index = this.dataForm.domains.indexOf(item)
        		if (index !== -1) {
          			this.dataForm.domains.splice(index, 1)
        		}
      		},
      		//加号
     		 addDomain() {
        		this.dataForm.domains.push({
          			value: '',
          			key: Date.now()
        		});
     		 },
        }
    }
</script>

elementui官网实例：https://element.eleme.cn/#/zh-CN/component/form

上面例子是经官网改编