父组件清空子组件的表单校验

A_front

已于 2022-03-09 15:26:16 修改

阅读量647

点赞数

分类专栏： vue VUE2 el-form 文章标签： Vue 父子组件表单验证 clearValidate 数据绑定

于 2022-03-09 14:59:13 首次发布

本文链接：https://blog.csdn.net/SDD12555/article/details/123377634

版权

vue 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

el-form

2 篇文章 0 订阅

订阅专栏

父组件

<invoice-form ref="invoiceForm" :initValue="invoiceForm" v-loading="loading" :disabled="!editing"></invoice-form>

子组件

 <el-form ref="form" :model="form" :rules="rules" class="invoice-form" :disabled="disabled" label-position="right" label-width="130px">
    <div class="sub-title">开票信息</div>
    <el-row :gutter="24">
      <el-col v-bind="responsive">
        <el-form-item label="抬头类型" prop="titleType">
          <enums-picker v-model="form.titleType" :title="CUSTOMER_TYPE[form.titleType]" enums="CUSTOMER_TYPE" :placeholder="!disabled ? '请选择抬头类型': ''" clearable @change="titleTypeChange"></enums-picker>
        </el-form-item>
      </el-col>
      <el-col v-bind="responsive">
        <el-form-item :label="customerCreditCodeLabel" prop="customerCreditCode">
          <el-input
            v-model.trim="form.customerCreditCode"
            :title="form.customerCreditCode"
            :placeholder="!disabled ? ('请输入' + customerCreditCodeLabel): ''"
            clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

父组件清空子组件的表单检验

this.$refs.invoiceForm.$refs.form.clearValidate();