vue提交数据清空表单与弹窗数据
父组件清空数据方法,在子组件需要的时候直接通过this.$parent.父组件方法名()调用即可。表单填完几项基本数据点击提交,出弹窗,然后填写手机号验证码后,点击弹窗的确认,提示信息。”......“,点击我知道了,此时弹窗关闭之时,表单数据清空,弹窗数据清空。
·
情景:
表单填完几项基本数据点击提交,出弹窗,然后填写手机号验证码后,点击弹窗的确认,提示信息
”......“,点击我知道了,此时弹窗关闭之时,表单数据清空,弹窗数据清空。
涉及到父子组件传参
子组件弹窗内容比较好清空:
<el-dialog
title="请填写您的联系方式"
:visible.sync="submitVisible"
width="30%"
:close-on-click-modal="false"
@close="close()"
>
<el-form
:model="formData"
ref="formData"
status-icon
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="手机号" prop="phone">
<el-input
v-model="formData.phone"
autocomplete="off"
placeholder="请输入手机号"
></el-input>
</el-form-item>
<el-form-item label="验证码" prop="captcha">
<el-input v-model="formData.captcha" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-button @click="getCode" :disabled="isDisabled">{{
verifyValue
}}</el-button>
<span slot="footer" class="dialog-footer">
<el-button
type="primary"
style="margin: 0 auto"
@click="createByCaptcha"
>提交</el-button
>
</span>
</el-dialog>
<el-dialog
title="提示"
:visible.sync="knowVisible"
width="30%"
:before-close="handleClose"
>
<span>FBA专线价格咨询申请,将在1个工作日内与您联系</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="resetForm('formData')"
>我知道了</el-button
>
</span>
</el-dialog>
清空form表单谨记两点:①在form表单上绑定ref②调用resetFields()方法
methods: {
//清空
resetForm(formName) {
this.$refs[formName].resetFields(); //相当于this.$refs.formName.resetFields()
this.$parent.resetForm() //调用父组件清空表单的方法
this.knowVisible = false
},
}
父组件form表单:
<div style="margin-top: 100px;margin-left:50px">
<el-form :inline="true" :model="formData"
ref="formData" class="demo-form-inline">
<el-form-item label="发货方式" prop="deliveryMethodName">
<el-select
clearable
v-model="formData.deliveryMethodName"
placeholder="请选择"
style="width: 113px; margin-right: 24px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="起运港" prop="shipmentPortName">
<el-select
clearable
v-model="formData.shipmentPortName"
placeholder="请选择"
style="width: 113px; margin-right: 24px"
>
<el-option
v-for="item in options1"
:key="item.value"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label=" 目的国家" prop="destinationCountry">
<el-input
@change="checkInput"
v-model="formData.destinationCountry"
placeholder="请输入"
style="width: 188px; display: inline-block; margin-right: 24px"
></el-input>
</el-form-item>
<el-form-item label=" FBA仓库编码:" prop="fbaWarehouseCode">
<el-input
@change="checkInput1"
v-model="formData.fbaWarehouseCode"
placeholder="请输入"
style="
height: 32px;
width: 138px;
display: inline-block;
margin-right: 24px;
"
></el-input>
</el-form-item>
<el-form-item label="货量(CBM)" prop="cargoVolume">
<el-input
@change="checkInput2"
v-model="formData.cargoVolume"
placeholder="请输入"
style="width: 99px; display: inline-block"
></el-input>
</el-form-item>
</el-form>
</div>
父组件清空数据方法,在子组件需要的时候直接通过this.$parent.父组件方法名()调用即可。
methods:{
resetForm() {
this.$refs.formData.resetFields()
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)