场景
使用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()
}