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

表单内部表单校验问题

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

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

2.然后子表单 将错误提示出来 如果 子表单填写完整了 再将这个错误提示 置为空。

代码如下：

// 父组件引入子组件
  <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 = ''
      }
}