昨天感冒发烧了，脑子不好使。在实现这个动态表单项时一直报错脑瓜子嗡嗡的！
不过好在昨天休息好了，今天起来趁脑瓜子好使，一会就弄好了。
这里记录一下文章来源：https://www.toymoban.com/news/detail-640368.html
<el-form-item
v-for="(classId,index) in addFom.classIds"
:label="`班级${index+1}`">
<el-row :gutter="12">
<el-col :span="12">
<el-input v-model="classId.classId"></el-input>
</el-col>
<el-col :span="5">
<el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="success">提交</el-button>
<el-button @click="addClassId" :disabled="disabled">添加班级</el-button>
</el-form-item> data(){
return{
addFom: {
teaName: '',
teaSex: true,
teaType: true,
teaPhone: '',
seniority: 0,
classIds: [
{ classId: '' }
]
}
}
}
/* 动态添加表单行 */
addClassId() {
this.addFom.classIds.length < 6 ? this.addFom.classIds.push({ classId: '' }) : this.disabled = true
},
/* 动态删除表单行 */
removeClassId(index) {
this.addFom.classIds.splice(index, 1)
this.disabled = false
}总结
其实就是利用了vue的v-for循环渲染。通过添加数组实现动态添加表单项 文章来源地址https://www.toymoban.com/news/detail-640368.html
到了这里，关于ElementUI动态添加表单项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
