elementUI中el-form 嵌套el-from 如何进行表单校验?

embedded/2024/9/23 14:20:14/

在el-form中嵌套另一个el-form进行表单校验和添加规则,首先,需要确保每个嵌套的el-form都有自己的modelrulesref。

以下是一个简化的示例:

<template><el-form :model="parentForm" :rules="parentRules" ref="parentForm"><!-- 父表单字段 --><el-form-item label="父字段" prop="parentField"><el-input v-model="parentForm.parentField"></el-input></el-form-item><!-- 嵌套的子表单 --><el-form :model="childForm" :rules="childRules" ref="childForm"><el-form-item label="子字段" prop="childField"><el-input v-model="childForm.childField"></el-input></el-form-item></el-form><!-- 提交按钮 --><el-button type="primary" @click="submitForm">提交</el-button></el-form>
</template><script>
export default {data() {return {parentForm: {parentField: ''},childForm: {childField: ''},parentRules: {parentField: [{ required: true, message: '请输入父字段', trigger: 'blur' }]},childRules: {childField: [{ required: true, message: '请输入子字段', trigger: 'blur' }]}};},methods: {submitForm() {// 分别验证父表单和子表单this.$refs.parentForm.validate(validParent => {if (!validParent) return;this.$refs.childForm.validate(validChild => {if (!validChild) return;// 如果都验证通过,则处理提交逻辑console.log('父表单和子表单都已验证通过');// ...提交逻辑代码...});});}}
};
</script>

注意:在el-form中嵌套另一个el-form进行表单校验和添加规则,通常不是Vue或Element UI推荐的做法,因为这可能导致一些意料之外的行为,特别是在处理表单验证和提交时。 


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

相关文章

JWT(JSON Web Token)

JWT JWT全称JSON Web Token&#xff08;JSON Web令牌&#xff09; 通过JSON形式作为Web应用令牌&#xff0c;用于在各方之间将信息作为JSON对象传输&#xff0c;在数据传输中完成数据加密&#xff0c;签名等相关处理。 作用&#xff1a; 授权&#xff1a;用户登录后&#x…

vue3.0 使用echarts与echarts-gl 实现3D饼图

效果 安装echarts npm install echarts npm install echarts-gl 3d饼图组件&#xff1a; <template><div style"width: 100%; height: 100%" ref"echart"></div> </template><script setup> import { reactive, ref, onMou…

集成与扩展:将Python办公自动化脚本集成到更大的工作流中

目录 一、引言 二、Python在办公自动化中的基础应用 2.1 数据处理与Excel操作 2.2 报告生成 三、Python与数据库的集成 3.1 连接到数据库 3.2 执行SQL查询 四、Python与Web服务的集成 4.1 使用Flask开发Web服务 五、Python与其他应用程序的集成 5.1 命令行调用 5.2…

windows通过wsl2安装linux系统之Ubuntu,傻瓜式安装

期望通过每一次分享&#xff0c;让技术的门槛变低&#xff0c;落地更容易。 —— around 目录 1.基础环境和要求2.安装wsl23.安装linux系统4.迁移linux系统挂载5.配置linux账号密码6.配置ssh登录方式待续… 前言 为什么要在windows上安装linux&#xff0c;这个问题当你是研发…

Blender怎么给物体添加遮罩

Blender中&#xff0c;你可以在雕刻模式下给物体添加遮罩&#xff0c;以保护某些部分不被修改或雕刻。以下是如何在Blender中添加遮罩的步骤&#xff1a; 1. 进入雕刻模式 首先&#xff0c;选择你的模型&#xff0c;然后按 Tab 键进入 雕刻模式。 2. 选择遮罩工具 在雕刻模…

docker-01 创建一个自己的镜像并运行容器

docker-01 创建一个自己的镜像并运行容器 前言 我们都知道使用Docker的镜像可以快速创建和部署应用&#xff0c;大大的节约了部署的时间。并且Docker 的镜像提供了除内核外完整的运行时环境&#xff0c;确保代码的环境一致性&#xff0c;从而不会在出现这段代码在我机器上没问…

MySQL——数据库的高级操作(二)用户管理(5)如何解决 root 用户密码丢失

大家都知道 root 用户是超级管理员&#xff0c;具有很多的权限&#xff0c;因此该用户的密码一旦丢失就会造成很大的麻烦&#xff0c;针对这种情况&#xff0c;MySQL提供了对应的处理机制&#xff0c;可以通过特殊方法登录到 MySQL 服务器&#xff0c;然后重新为 root 用户设置…

【YashanDB知识库】YAS-02025 no free space in virtual memory pool

本文转自YashanDB官网&#xff0c;具体内容请见YAS-02025 no free space in virtual memory pool 【标题】YAS-02025 no free space in virtual memory pool 【问题分类】业务SQL执行 【关键字】YAS-02025 【问题描述】在崖山环境查询数据提示报错 YAS-02025 no free space…