element-plus表格的表单校验如何实现,重点在model和prop

文章目录

vue:3.x
element-plus:2.7.3

在这里插入图片描述

重点:
1) tableData放到form对象里
2) form-item的prop要写成tableData.序号.属性

<!--table-表单校验-->
<template><el-form ref="forms" :model="form"><el-table :data="form.tableData" style="width: 100vw"><el-table-column :label="col.label" v-for="col in cols"><template #default="scope"><div v-if="scope.row.isEdit"><el-form-item :prop="`tableData.${scope.$index}.${col.field}`" :rules="rules[col.field]"><el-input v-model="scope.row[col.field]" :placeholder="`请输入${col.label}`" /></el-form-item></div><div v-else>{{ scope.row[col.field] }}</div></template></el-table-column><el-table-column fixed="right" label="Operations"><template #default="scope"><el-button link type="primary" size="small" @click="edit(scope)">Edit</el-button><el-button link type="primary" size="small" @click="save(scope)">Save</el-button></template></el-table-column></el-table><el-form-item><el-button type="primary" @click="submitForm(forms)">Submit</el-button><el-button @click="resetForm(forms)">Reset</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { FormInstance, FormRules } from 'element-plus';
import { onMounted, reactive } from 'vue';import { ref } from 'vue'const forms = ref < FormInstance > ()
const form = ref({ tableData: [] })
const rules = reactive < FormRules > ({name: [{ required: true, message: "请输入姓名", trigger: "blur" },],cardId: [{ required: true, message: "请输入身份证", trigger: "blur" },{ pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }],
})const cols = [{ field: 'name', label: '姓名' },{ field: 'city', label: '城市' },{ field: 'cardId', label: '身份证' },
]onMounted(() => {form.value.tableData = [{name: 'Tom',city: 'Los Angeles',cardId: 331022100040284032,isEdit: false},{name: 'Tom',city: 'Los Angeles',cardId: 331022100040284032,isEdit: false},]
})const edit = (scope) => {console.log(scope, 'scope')scope.row.isEdit = true
}const save = async (scope) => {console.log(scope, 'scope')// scope.row.isEdit = falseif (!forms) returnconsole.log(form.value, forms, 'form')await forms.value.validate(async valid => {console.log(valid, 'valid')})
}const submitForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.validate((valid) => {if (valid) {console.log('submit!',form.value)} else {console.log('error submit!',form.value,formEl)}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.resetFields()
}
</script><style scoped lang="less"></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/14796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装mpi4py与dlio_profiler_py的总结

安装mpi4py mpi4py是一个Python库&#xff0c;它提供了与MPI&#xff08;Message Passing Interface&#xff09;兼容的接口&#xff0c;使得Python程序能够利用MPI实现并行计算。mpi4py 的核心是基于MPI标准的C/C实现&#xff0c;它能够在高性能计算环境下进行高效的并行处理…

软考之信息系统管理知识点(3)

流水线&#xff1a;是指在程序执行时多条指令重叠进行操作的一种准并行处理实现技术。各种部件同时处理是针对不同指令而言的&#xff0c;它们可同时为多条指令的不同部分进行工作&#xff0c;以提高各部件的利用率和指令的平均执行速度。 编译得过程 关系数据库是表的集合 …

【全网最全】2024电工杯数学建模A题前两问完整解答+21页初步参考论文+py代码+保奖思路等(后续会更新成品论文)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片链接&#xff0c;那是获取资料的入口&#xff01; 【全网最全】2024电工杯数学建模A题前两问完整解答21页初步参考论文py代码保奖思路等&#xff08;后续会更新成品论文&#xff09;「首先来看看目前已有…

力扣:92. 反转链表 II(Java)

目录 题目描述&#xff1a;示例 1&#xff1a;示例 2&#xff1a;代码实现&#xff1a; 题目描述&#xff1a; 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的…

网络采集受限?如何解决指纹识别、IP封禁、验证码、账号多登等问题

网页采集是什么 网页采集&#xff0c;也常被称作网络采集、网络数据抓取&#xff0c;是一种通过自动化工具从网站上获取信息的技术。这些技术通过访问网页&#xff0c;解析页面上的内容&#xff0c;并提取出有价值的数据&#xff0c;如文本、图片、链接等。 网页采集通常用于…

Python 调整PDF文件的页面大小

在处理PDF文件时&#xff0c;我们可能会遇到这样的情况&#xff1a;原始PDF文档不符合我们的阅读习惯&#xff0c;或者需要适配不同显示设备等。这时&#xff0c;我们就需要及时调整PDF文档中的页面尺寸&#xff0c;以满足不同应用场景的需求。 利用Python语言的高效性和灵活性…

Linux--网络通信(一)概述

网络通信概述 网络通信本质上是一种进程间通信&#xff0c;是位于网络中不同主机上的进程之间的通信&#xff0c;属于 IPC 的一种&#xff0c; 通常称为 socket IPC。所以网络通信是为了解决在网络环境中&#xff0c;不同主机上的应用程序之间的通信问题。 大概可以分为三个层…

23种设计模式之一————外观模式详细介绍与讲解

外观模式详细讲解 一、概念二、 外观模式结构核心思想及解释模式的UML类图模式角色应用场景模式优点模式缺点 三、实例演示图示代码展示运行结果 一、概念 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c…

【问题解决】Android Studio Jellyfish新建Kotlin项目后Gradle Sync及Maven下载很慢

创建新项目之后&#xff0c;Gradle Sync和Build都很慢&#xff0c;因为下载Gradle和Maven等工具。 代码默认配置 settings.gradle.kts pluginManagement {repositories {google {content {includeGroupByRegex("com\\.android.*")includeGroupByRegex("com\\.g…

Android Activity 设计详解

文章目录 Android Activity 设计说明1. Activity 的生命周期2. Activity 的启动模式3. Activity 的通信4. Activity 的布局和视图管理5. Activity 的配置变化处理6. Activity 的保存和恢复状态7. Activity 的任务和返回栈 总结 Android Activity 设计说明 在 Android 中&#…

Ansible01-Ansible的概述、实验环境初始化、Inventory

目录 写在前面1. Ansible是什么1.1 简介与来历1.2 Ansible的特点1.3Ansible的架构与工作流程1.3.1 ansible 任务执行模式1.3.2 ansible 执行流程1.4 Ansible的模块 2. Ansible实验初始化2.1 实验环境2.2Ansible的安装2.2.1 Ansible的程序结构 2.3 修改Ansible配置文件2.3.1 配置…

【408精华知识】页、页面、页框、页帧、内存块、物理块、物理页面还傻傻分不清?

在做题过程中&#xff0c;我们经常能看到页、页框、块等概念&#xff0c;初接触时&#xff0c;常感觉傻傻分不清&#xff0c;这篇文章将简洁地介绍它们之间的联系与区别。 这些概念之间的根本区别&#xff0c;在于是物理上的概念还是逻辑上的概念&#xff0c;也即是虚地址还是实…

汇聚荣:新手做拼多多应该注意哪些事项?

新手在拼多多开店&#xff0c;面临的是竞争激烈的市场和复杂的运营规则。要想在这个平台上脱颖而出&#xff0c;必须注意以下几个关键事项。 一、市场调研与定位 深入了解市场需求和竞争对手情况是新手开店的首要步骤。选择有潜力的细分市场&#xff0c;并针对目标消费者群体进…

华为云服务培训

一、存储类服务实践 是什么&#xff1a; 云硬盘( Elastic Volume Service )是一种为 ECS&#xff08;弹性云服务器&#xff09;、BMS&#xff08;裸金属服务器&#xff09; 等计算服务提供持久性存储的服务。 作用&#xff1a; 它通过数据冗余和缓存加速等多项技术&#xf…

Spring系列-03-BeanFactory和Application接口和相关实现

BeanFactory BeanFactory和它的子接口们 BeanFactory 接口的所有子接口, 如下图 BeanFactory(根容器)-掌握 BeanFactory是根容器 The root interface for accessing a Spring bean container. This is the basic client view of a bean container; further interfaces such …

windows 11上自带时间管理-番茄工作法

在 Windows 11 中&#xff0c;你可以使用 专注 功能来最大程度地减少干扰&#xff0c;帮助你保持专注。 专注的工作原理 专注时段打开后&#xff0c;将会出现以下情况&#xff1a; 专注计时器将显示在屏幕上 请勿打扰将打开 任务栏中的应用不会闪烁发出提醒 任务栏中应用的…

SpringCloud系列(23)--手写实现负载轮询算法

前言&#xff1a;在上一篇文章中我们介绍了关于负载轮询算法的原理以及看了源代码&#xff0c;而本章节内容则是着重于我们自己手写一个负载轮询算法 1、分别编写provider-payment8001、provider-payment8002这两个子项目的PaymentController类&#xff0c;增加一个/payment/lb…

Py之llama-parse:llama-parse(高效解析和表示文件)的简介、安装和使用方法、案例应用之详细攻略

Py之llama-parse&#xff1a;llama-parse(高效解析和表示文件)的简介、安装和使用方法、案例应用之详细攻略 目录 llama-parse的简介 llama-parse的安装和使用方法 1、安装 2、使用方法 第一步&#xff0c;获取API 密钥 第二步&#xff0c;安装LlamaIndex、LlamaParse L…

<string.h>中部分库函数的模拟实现

前言 嗨&#xff0c;我是firdawn&#xff0c;本章将简单介绍&#xff0c;<string.h>中部分库函数的模拟实现&#xff0c;如strncpy&#xff0c;strncat&#xff0c;memcpy&#xff0c;memmove。在本文片末&#xff0c;还讲简单介绍判断机器大小端的函数实现&#xff0c;…

VSCode SAP Systems配置HTTPS访问SAP

第一次访问提示&#xff0c;Self-Signed 证书 解决办法&#xff1a;https访问SAP Fiori网站&#xff0c;导出SSL证书为DER格式保存到硬盘上 双击DER文件&#xff0c;导入到系统 退出VSCode&#xff0c;再次启动 Test Connection, 提示 The system URL is using a hostname …