Element Form表单动态增删改

html

<el-form-item v-for="(item, index) in dataForm.discounts" :label="'里程折扣' + index" style="position: relative;" required>
	<el-col :span="11">
	    <el-form-item :prop="'discounts.' + index + '.distance'" :rules="rules.distance">
	      <el-input v-model="item.distance" placeholder="里程数"></el-input>
	    </el-form-item>
	</el-col>
	<el-col style="text-align: center;" :span="2">-</el-col>
	<el-col :span="11">
	    <el-form-item :prop="'discounts.' + index + '.discount'" :rules="rules.discount">
	        <el-input v-model="item.discount" placeholder="折扣数"></el-input>
	    </el-form-item>
	</el-col>
	<el-button 
		v-if="index===0" 
		plain type="success" 
		size="small" 
		icon="el-icon-plus" 
		style="position: absolute;right: -70px;bottom: 18px;"
		@click.prevent="addDiscount()" >
	</el-button>
	<el-button 
		v-if="index>0" 
		plain type="danger"
		icon="el-icon-minus" size="small" 
		style="position: absolute;right: -70px;bottom: 18px;"
		@click.prevent="removeDiscount(item)">
	</el-button>
</el-form-item> 

js

 data() {
	return {
		dataForm: {
		    discounts:[{distance:'',discount:''}]//公里折扣
		},
		rules: {
			distance:[{required: true, message: '里程数不能为空',trigger: 'blur'}],
			discount:[{required: true, message: '折扣数不能为空', trigger: 'blur'}]
		}
	}
}

methods: {
	//新增
	addDiscount() {
	    this.dataForm.discounts.push({distance:'',discount:''});
	},
	//删除
	removeDiscount(item) {
		let index = this.dataForm.discounts.indexOf(item)
		this.dataForm.discounts.splice(index, 1)
	}
}

效果如下：