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
上面例子是经官网改编