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

embedded/2025/2/26 9:25:27/

场景

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

http://www.ppmy.cn/embedded/167232.html

相关文章

C++模板与STL七日斩:从工业编程到高效数据管理(工业项目)

模板如何提升工业代码复用性 实战项目&#xff1a;创建通用【工业设备容器】模板类 类模板的定义与实例化模板参数默认值 #include <iostream> #include <string> using namespace std;template <typename T string> class IndustrialContainer { priva…

算法-数据结构-图-邻接表构建

邻接表的基本概念 顶点&#xff08;Vertex&#xff09;&#xff1a; 图中的每个顶点用一个节点表示。 每个顶点存储一个链表或数组&#xff0c;用于记录与该顶点直接相连的其他顶点。 边&#xff08;Edge&#xff09;&#xff1a; 如果顶点 A 和顶点 B 之间有一条边&#xf…

Windows安装NVIDIA显卡CUDAD调用GPU,适用于部署deepseek r1

显卡、显卡驱动、CUDA之间的关系 显卡&#xff1a;&#xff08;GPU&#xff09;&#xff0c;主流是NVIDIA的GPU&#xff0c;因为深度学习本身需要大量计算。GPU的并行计算能力&#xff0c;在过去几年里恰当地满足了深度学习的需求。AMD的GPU基本没有什么支持&#xff0c;可以不…

QT:paintEvent、QPainter、QPaintDevice

paintEvent 介绍 在 Qt 编程中&#xff0c;paintEvent 是 QWidget 类中的一个非常重要的虚函数&#xff0c;用于处理绘图事件。当一个 QWidget 或其派生类的实例需要进行重绘操作时&#xff0c;Qt 会自动调用该控件的 paintEvent 函数。 触发时机 窗口首次显示&#xff1a;当…

Log | Hugo+PaperMod+Github创建自己的博客网站

0. 友情提示 以上内容是我根据我的博客构建内容中总结&#xff0c;并不是在构建过程中记录的&#xff0c;或许有错误之处&#xff0c;若存在问题&#xff0c;欢迎大家指出&#xff01; 欢迎大家关注我的个人博客网站&#xff1a;YHs Log 1. 引言 Lilian Wengs Log: LilLog 在…

大模型在尿潴留风险预测及围手术期方案制定中的应用研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的 1.3 研究方法与数据来源 二、大模型预测尿潴留的原理与方法 2.1 相关大模型介绍 2.2 模型构建与训练 2.3 模型评估指标与验证 三、术前尿潴留风险预测及方案制定 3.1 术前风险因素分析 3.2 大模型预测结果分析 3.3 …

【解决idea2024.3.3版本Vue插件报错】

解决idea2024.3.3版本Vue插件报【Vue: TypeError: ctxVars.at is not a function at forEachInterpolationSegment】错 错误关键信息[Vue: TypeError: ctxVars.at is not a function at forEachInterpolationSegment]注&#xff1a;本文中文件路径为我们自己安装idea的实际路径…

数据分析七大步骤

在工作中&#xff0c;我们可能都遭遇过面对一堆数据&#xff0c;费尽心思进行分析&#xff0c;结果却惨不忍睹&#xff0c;仿佛“一顿操作猛如虎&#xff0c;一看结果0:5”。更糟糕的是&#xff0c;有时我们甚至完全找不到数据分析的头绪。 别急&#xff0c;朋友们&#xff01…