安徽省建设银行网站宁波seo外包

场景

使用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绑定的提交方法：formSubmitthis.$refs.form.submit()
}