自定义提交按钮触发avue-form绑定的submit事件

场景

使用avue-form时,提交按钮会绑定至form区域下方,如果想自定义按钮位置,需要通过dialog的footer位置进行编写,例如:

<avue-form ref="form" v-model="dataInfo" :option="dataInfoOption" @submit="formSubmit"></avue-form>
<div slot="footer" class="dialog-footer">  
  <el-button size="small" type="primary" @click="handleSubmit">提 交</el-button>  
  <el-button size="small" @click="handleClose">关 闭</el-button>  
</div>

此时,如果在handleSubmit触发后,需要进行表单验证,返回后,表单将变得不可编辑,此时我们用不到avue-form绑定的表单状态机制done,如果使用done的话,将完美变更表单状态,表单还可以修改!

所以解决办法是:给avue-form绑定提交事件的方法,在handleSubmit方法内部主动调用对应form绑定的submit方法

更改后的代码逻辑:

formSubmit(form, done) {
	// 在这里我们可以在验证失败后使用done(false)来进行返回,这样会终止表单提交并且表单依旧可以编辑
}

handleSubmit() {
	// 这里这行会触发form绑定的提交方法:formSubmit
	this.$refs.form.submit()
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值