element ui 实现动态表单

实现具体功能

对表单进行新增、删除以及验证每一个表单的字段。
实现效果如图
在这里插入图片描述1.实现表单的添加和删除

   // 新增
       addForm(index) {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.form.formList.push({
                        ...this.form.formList[index],
                        questionClassify: 1,
                        severityDegree: 1,
                        question: '',
                        modelId: '',
                        modelName: '',
                        picIdList: [],
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    
   // 删除
   deleteCurrentForm(index) {
            debugger
            // if()
            this.form.formList.splice(index, 1)
        },

2.可能较不常见的就是表单的验证,在添加下一个表单时对上一个表单进行验证。只需在prop中加入当前要验证的哪个表单的哪个字段,如下。

 <el-form-item label="检查时间" :prop="`formList.${index}.checkDate`" :rules="rules.checkDate">

再展示一下form的结构:

 form: {
          formList: [{
            inspectType: 0,
            checkDate: new Date(),
            checkUserId: '',
            checkUserName: '',
            checkOrgName: '',
             checkOrgId: '',
             modelId: '',
             modelName: '',
             questionClassify: 1,
             severityDegree: 1,
             unitProject: '',
             distributeProject: '地基与基础', //分部工程
             concreteProject: '',
             question: '',
             picIdList: []
             }]
       },
    rules: {checkDate: [ {required: true, message: '请输入检查时间', trigger: 'blur'} ] }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值