动态生成表单，修改输入框值页面无效验证不通过（父子传值）（后端返回表单结构，前端动态生成表单）

夏木。。。

于 2022-07-01 10:42:46 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-js 文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/w_jiunian/article/details/125554135

本文主要探讨了如何处理后端返回的表单结构，前端使用Vue.js和ElementUI动态生成表单的过程中，遇到的输入框值改变但页面验证未更新的问题。详细阐述了解决父子组件间通信和实时验证的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在父组件内，请求接口，返回表单结构，并将其处理为自己可用的结构，有表单验证也可在此时处理好：


接口名().then(res=>{

        res.data.map(i=>{
           let pla = ''
            if(i.placeholder == ''){
              if(i.type == 'input'){
                pla = `请输入${i.prop}`
              }else if(i.type == 'date'){
                pla = `请选择${i.prop}`
              }
            }
           this.formData.push({
                label: i.prop,
                type: i.type,
                maxlength: null,
                placeholder: pla,
                prop: i.label
           })
          that.rules[i.label] = [{ required: true, message: pla, trigger: i.type == 'input' ? 'blur' : 'change' }]
        })


})


****!!!!!  注意这个是时候不要处理form表单的model直接给他赋值为空即可，否则会出现输入框输值，页面无变化，验证不通过，打印却会有值的情况 *******

父组件给ruleForm的值为{}



<template>
  <el-form :inline="true" :model="ruleForm" ref="ruleForm" :rules="rules" label-position="right" label-width="76" class="demo-ruleForm">
    <el-row&