ElementUI动态添加表单项

昨天感冒发烧了，脑子不好使。在实现这个动态表单项时一直报错脑瓜子嗡嗡的！ 不过好在昨天休息好了，今天起来趁脑瓜子好使，一会就弄好了。 这里记录一下

代码语言：javascript复制

        <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>

代码语言：javascript复制

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

渲染 button el 表单 数组

0 人点赞