当前位置: 首页 > news >正文

自定义提交按钮触发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()
}

相关文章:

  • TMDS视频编解码算法
  • OpenIPC开源FPV之Adaptive-Link安装
  • MongoDB私人学习笔记
  • (Arrow)时间处理变得更简单
  • Git最佳实践指南(Windows/Linux双系统详解)
  • 【Ambari】Ranger KMS
  • P5782 [POI 2001] 和平委员会 2-SAT
  • 系统调用过程
  • nv docker image 下载与使用命令备忘
  • MySQL-增删改查
  • Selenium 与 Coze 集成
  • java.2.25
  • Linux中的cgdb的基本使用
  • 剑指offer - 面试题11 旋转数组的最小数字
  • 华为机试牛客刷题之HJ76 尼科彻斯定理
  • Docker 搭建 Gitlab 服务器 (完整详细版)
  • VScode 开发
  • [算法--前缀和] 和可以被K整除的子数组
  • 软考高级【网络规划设计师】 综合知识
  • 使用Python开发PDF文本提取工具
  • asp影楼网站设计/郑州网络营销哪家正规
  • 网站建设需要哪些必备文件/seo推广的特点
  • 网站开发课题的目的与意义/seo产品优化推广
  • 北京网站设计公司兴田德润信任高/友链交换平台
  • 广州一网通注册公司/免费seo网站自动推广
  • 多语言网站源码/外贸企业网站制作哪家好