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

news/2025/2/26 19:03:42

场景

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

http://www.niftyadmin.cn/n/5869087.html

相关文章

大语言模型的不足与研究热点

大语言模型的不足 技术局限性 理解与判断不足&#xff1a;缺乏人类的直觉和伦理判断&#xff0c;可能生成不准确或道德争议内容&#xff0c;例如在复杂伦理决策中表现不佳。 上下文依赖性&#xff1a;对输入上下文的完整性要求较高&#xff0c;若信息模糊或不完整&#xff0c…

汽车制造又一革新:Profinet-EtherCAT实现高精度激光焊接

通过稳联技术Profinet到EtherCAT网关&#xff0c;将PLC控制系统与激光焊接机器人连接&#xff0c;实现高精度的汽车车身焊接。 在现代汽车制造过程中&#xff0c;装配线的自动化程度直接影响生产效率和产品质量。某知名汽车制造厂引入了稳联技术Profinet转EtherCAT协议网关&…

Language Models are Unsupervised Multitask Learners,GPT-2详细讲解

1542M1.542B15.42亿个 1.背景和动机 1.GPT-1在特定自然语言理解任务标注较少情况下&#xff0c;通过利用大量无标注数据&#xff0c;取得较强性能 2.BERT性能超越GPT-1&#xff0c;GPT-2通过构建更大数据集和模型&#xff0c;同时在zero-shot的多任务学习场景中展示不错性能 …

React加TypeScript最新部署完整版

React TypeScript 全流程部署指南 一、环境准备与项目初始化 关于node.js及npm的安装请参见我的文章。 1.1 创建项目&#xff08;React TypeScript&#xff09; # 使用官方推荐脚手架&#xff08;Vite 5.x&#xff09; npx create-vitelatest my-app --template react-ts …

Java Web开发实战与项目——项目集成与部署

软件开发中&#xff0c;集成与部署是非常关键的一步。无论是将前端与后端模块进行有效的集成&#xff0c;还是通过自动化构建工具&#xff08;如Maven&#xff09;和CI/CD工具&#xff08;如Jenkins&#xff09;实现自动化部署&#xff0c;都会对项目的开发和发布流程产生深远影…

pyautogui库的screenshot()函数

# 方法一 screenshot pyautogui.screenshot() screenshot.save("screenshot.png")# 方法二 # 获取屏幕分辨率 screen_width, screen_height pyautogui.size()# 截取桌面屏幕 screenshot pyautogui.screenshot(region(0, 0, screen_width, screen_height)) screens…

【js逆向入门】图灵爬虫练习平台 第八题

地址&#xff1a;aHR0cHM6Ly9zdHUudHVsaW5ncHl0b24uY24vcHJvYmxlbS1kZXRhaWwvOC8 点击f12&#xff0c;立马进入到debugger&#xff0c;右击选一律不在此处暂停&#xff0c;然后按键f8 再刷新一下就能看到xhr加载的数据包 请求信息如下 请求标头里面有加密参数M和T 请求载荷只…

可扩展调度在时间敏感网络中的应用:一种高效的流冲突检测方法

论文标题 **中文标题&#xff1a;**可扩展调度在时间敏感网络中的应用&#xff1a;一种高效的流冲突检测方法 **英文标题&#xff1a;**Scalable Scheduling in Time-Sensitive Networking: An Efficient Stream Conflict Detection Method 作者信息 Lei Xu, Cailian Chen (…