form表单包含form表单的校验问题

朴灿烈づ我的快乐病毒、 2022-12-17 08:49 217阅读 0赞

## 表单内部表单校验问题 ##

当表单下面还嵌套表单的时候这个校验就不能走正常的校验了  
思路：

1.可以在外部表单校验之前先手动校验内部表单（适用于内部表单比较简单的情况），如果为空可以将这个错误的提示通过组件传递给子组件，即：子表单。

2.然后子表单 将错误提示出来 如果 子表单填写完整了 再将这个错误提示 置为空。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center]  
代码如下：

// 父组件引入子组件
      <CostingLine
            ref="tableLine"
            :err-msg="costingLineErr"
          ></CostingLine>
          methods： { 
            if (paramsTableLine.wayValue.length === 0) { 
            this.costingLineErr = '不能为空'
            return
          } else { 
            this.costingLineErr = ''
          }

// 子组件
    <el-form-item label="线路" :error="ruleMsg" required>
              <el-select
                v-model="form.wayValue"
                class="add-ways-select"
                collapse-tags
                multiple
                placeholder="已添加路线"
                @change="reduceLine"
              >
                <el-option
                  v-for="item in form.way"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-button type="primary" @click="dialogFormVisible = true">
                选择
              </el-button>
            </el-form-item>
    
    props: { 
        errMsg: { 
          type: String,
          default: ''
        }
    }
    watch: { 
        errMsg(val) { 
          this.ruleMsg = val
        }
      },
      methods：{ 
       if (this.form.wayValue.length > 0) { 
            this.ruleMsg = ''
          }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5X3lhbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/ca59fe6766124686a4bc2f4cfb4b5e9a.png