对于动态增减表单项，Element UI 官方文档表单那一节已经介绍得很清楚了，我之前没有看见，绕了很多弯路，这里针对点击按钮增删一排输入框的问题做一个总结。

效果图如下

存在一排必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行

必填项很简单，就是普通表单：

<el-formref="form":rules="formRules":inline="true":model="form"label-width="80px"
><!-- 固定项目 --><el-form-item label="姓名" prop="name"><el-input v-model="form.name" palceholder="请输入姓名"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" palceholder="请输入手机号"></el-input></el-form-item>
</el-form>
<el-button @click="addItem" type="primary">增加</el-button>

export default {name: 'dynamicForm',data () {return {form: {name: '',phone: ''},formRules: {name: [{required: true, message: '请输入姓名', trigger: 'blur'}],phone: [{required: true, message: '请输入手机号', trigger: 'blur'},{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }]}}}
}

动态表单部分：

<!-- 动态增加项目 -->
<!-- 不止一个项目，用div包裹起来 -->
<div v-for="(item, index) in form.dynamicItem" :key="index"><el-form-itemlabel="姓名":prop="'dynamicItem.' + index + '.name'":rules="{required: true, message: '姓名不能为空', trigger: 'blur'}"><el-input v-model="item.name"></el-input></el-form-item><el-form-itemlabel="手机号":prop="'dynamicItem.' + index + '.phone'":rules="[{required: true, message: '手机号不能为空', trigger: 'blur'},{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }]"><el-input v-model="item.phone"></el-input></el-form-item><el-form-item><i class="el-icon-delete" @click="deleteItem(item, index)"></i></el-form-item>
</div>

在data 的 form 里增加 dynamicItem

form: {name: '',phone: '',dynamicItem: []
}

在methods里增加方法

methods: {addItem () {this.form.dynamicItem.push({name: '',phone: ''})},deleteItem (item, index) {this.form.dynamicItem.splice(index, 1)}
}

每次点击增加按钮，会在dynamicItem里增加新的项，反映到页面上就是新增了一排输入框；而点击删除的时候，则通过index找到当前行删掉。