参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。
htmt部分：
<div id="app" style=" 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>
实现效果:单个时
多个时显示删除按钮
