ElementUI动态添加表单项

昨天感冒发烧了，脑子不好使。在实现这个动态表单项时一直报错脑瓜子嗡嗡的！

不过好在昨天休息好了，今天起来趁脑瓜子好使，一会就弄好了。

这里记录一下

        <el-form-itemv-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循环渲染。通过添加数组实现动态添加表单项