vue+elementUI动态增加表单项并添加验证

参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。
htmt部分：

<div id="app" style="width: 500px;">
        <el-form :model="environmentForm" ref="environmentForm">
            <el-row :gutter="24" v-for="(item, index) in environmentForm.items" :key="item.key">
                <el-col :span="6">
                    <el-form-item :prop="'items.' + index + '.name'"
                        :rules="{required: true, message: '名称不能为空', trigger: 'blur'}">
                        <el-input v-model="item.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item :prop="'items.' + index + '.variable'"
                        :rules="{required: true, message: '变量值不能为空', trigger: 'blur'}">
                        <el-input v-model="item.variable"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-if="environmentForm.items.length !== 1">
                    <el-button @click="removeEnvironmentForm(item)" class="el-icon-delete" size="mini" circle>
                    </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button @click="addEnvironmentForm" size="mini" class="el-icon-plus" circle></el-button>
                </el-col>
            </el-row>



            <el-form-item>
                <el-button type="primary" @click="submitForm('environmentForm')">提交</el-button>
                <el-button @click="resetForm('environmentForm')">重置</el-button>
            </el-form-item>
        </el-form>



    </div>

<script>

    var vm;

    $(function () {

        vm = new Vue({

            el: '#app',

            data: {

                environmentForm: {

                    items: [{

                        name: '',

                        variable: '',

                    }]

                }

            },

            mounted: function () {},

            methods: {

                resetForm(formName) {

                    this.$refs[formName].resetFields();

                },

                removeEnvironmentForm(item) {

                    var index = this.environmentForm.items.indexOf(item)

                    if (index !== -1) {

                        this.environmentForm.items.splice(index, 1)

                    }

                },

                addEnvironmentForm() {

                    this.environmentForm.items.push({

                        name: '',

                        variable: '',

                        description: '',

                        key: Date.now()

                    });

                },

            }

        })

    })

</script>

实现效果:单个时

 

 多个时显示删除按钮