vue3+elementPlus table里添加输入框并提交校验

<template><div><el-form :model="info" ref="forms"><el-tableref="tableRef":data="info.data"border><el-table-column align="center" property="name" label="*姓名"><template #default="row"><el-form-item :prop="'data.' + row.$index + '.name'" :rules="formRules.name"><el-input placeholder="请输入姓名" v-model="info.data[row.$index].name" /></el-form-item></template></el-table-column><el-table-column align="center" property="role" label="角色"><template #default="row"><el-form-item :prop="'data.' + row.$index + '.role'" :rules="formRules.role"><el-input placeholder="请输入角色" v-model="info.data[row.$index].role" /></el-form-item></template></el-table-column></el-table></el-form><el-button type="primary" @click="submitForm()">Submit</el-button></div>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'
import type { FormInstance } from 'element-plus'
let info:any = reactive({data:[{id: 0,name: '',role:''},{id: 1,name: '',role:''}]
})
const formRules = reactive({name: [{ required: true, message: '请输入姓名', trigger: 'change' }],role: [{ required: true, message: '请输入角色', trigger: 'change' }]
})
const forms = ref<FormInstance>()
const submitForm = async () => {if (!forms) returnreturn await forms.value?.validate((valid: any) => {if (valid) {console.log('submit!')} else {console.log('error submit!')return false}})
}
</script>

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

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

相关文章

ARM 配置晶振频率

文章目录 前言串口乱码问题定位内核修改晶振频率uboot 修改晶振频率番外篇 前言 上篇文章《ARM DIY 硬件调试》介绍了 DIY ARM 板的基础硬件焊接&#xff0c;包括电源、SOC、SD 卡座等&#xff0c;板子已经可以跑起来了。 但是发现串口乱码&#xff0c;今天就来解决串口乱码问…

【python办公自动化】PysimpleGUI中更新Listbox组件选定元素的格式

pysimplegui中更新Listbox组件选定元素的格式 背景问题解决创建窗口布局创建窗口背景 在进行打分时候,由于打分的指标较多,因此为了辨别已经打完分数的指标,可以考虑对打过分的指标进行标记,故可以采用格式修改的方法调整,比如添加一些特殊标记 问题解决 import PySim…

在Orangepi5开发板3588s使用opencv获取摄像头画面

先感谢香橙派群的管理员耐心指导&#xff0c;经过不断的调试修改最后成功通过opencv调用mipi摄像头获取画面 就记录分享一下大概步骤希望大家少踩点坑&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 我用的固件系统是ubuntu2022.0.4 固件是&#x…

拒绝摆烂!C语言练习打卡第四天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4d…

Android Studio 新建module报错:No signature of method

android平台uni原生插件开发过程中&#xff0c;使用Android Studio 新增 module 报错 选择app --> create new module &#xff0c;填写相关信息 Android Studio 新建module报错&#xff1a; 原因&#xff1a;Android Studio 版本过高&#xff0c;新增了namespace&#x…

QT SSL handshake failed问题分析与解决 QT基础入门【网络编程】openssl

问题: 使用https方式进行post 和get请求时,有时候会出现SSL handshake failed的问题,其实是调用Qt QNetworkAccessManager出现的问题。 其实SSL握手是建立HTTPS连接过程的第一步。为了验证和建立连接,用户的浏览器和网站的服务器必须经过一系列检查(握手),从而建立HTTP…

40万字完整版智能矿山项目建设整体解决方案WORD

导读&#xff1a;原文《40万字完整版智能矿山项目建设整体解决方案WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 1.1 总体技术要求 1.1.1 核心业务架构 智…

Java算法_ 二叉树的最大深度(LeetCode_Hot100)

题目描述&#xff1a;给定一个二叉树 &#xff0c;返回其最大深度。root 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 获得更多&#xff1f;算法思路:代码文档&#xff0c;算法解析的私得。 运行效果 完整代码 /*** 2 * Author: LJJ* 3 * Date: 2023/…

【Python机器学习】实验14 手写体卷积神经网络(PyTorch实现)

文章目录 LeNet-5网络结构&#xff08;1&#xff09;卷积层C1&#xff08;2&#xff09;池化层S1&#xff08;3&#xff09;卷积层C2&#xff08;4&#xff09;池化层S2&#xff08;5&#xff09;卷积层C3&#xff08;6&#xff09;线性层F1&#xff08;7&#xff09;线性层F2 …

ant-design-vue在ios使用AUpload组件唤起了相机,HTML的 `capture` 属性

在使用ant design vue组件的上传组件AUpload的时候有一个问题&#xff0c;直接按照demo写&#xff0c;在ios上会唤起相机&#xff0c;但是实际上我们的需求是弹出选择相册/相机这个弹框。 解决办法是加一个 cupture"null"这个属性即可 <a-upload:capture"nu…

攻防世界-fileinclude

原题 解题思路 题目已经告诉了&#xff0c;flag在flag.php中&#xff0c;先查看网页源代码&#xff08;快捷键CTRLU&#xff09;。 通过抓包修改&#xff0c;可以把lan变量赋值flag。在cookie处修改。新打开的网页没有cookie&#xff0c;直接添加“Cookie: languagephp://filte…

机器学习笔记 - 基于keras + 小型Xception网络进行图像分类

一、简述 Xception 是深度为 71 层的卷积神经网络,仅依赖于深度可分离的卷积层。 论文中将卷积神经网络中的 Inception 模块解释为常规卷积和深度可分离卷积运算(深度卷积后跟点卷积)之间的中间步骤。从这个角度来看,深度可分离卷积可以理解为具有最大数量塔的 Inception 模…

元宇宙电商—NFG系统:区块链技术助力商品确权。

在国内&#xff0c;以“数字藏品”之名崛起以来&#xff0c;其与NFT的对比就从未停歇。从上链模式到数据主权&#xff0c;从炒作需求到实际应用&#xff0c;从售卖形式到价值属性&#xff0c;在各种抽丝剥茧般的比较中&#xff0c;围绕两者孰优孰劣的讨论不绝于耳。 NFT的每一…

PLA: 语言驱动的开放词汇3D场景理解

论文&#xff1a;https://arxiv.org/abs/2211.16312 GitHub - CVMI-Lab/PLA: (CVPR 2023) PLA: Language-Driven Open-Vocabulary 3D Scene Understanding代码&#xff1a;GitHub - CVMI-Lab/PLA: (CVPR 2023) PLA: Language-Driven Open-Vocabulary 3D Scene Understanding 摘…

【LeetCode-中等题】49. 字母异位词分组

题目 题解一:排序哈希表 思路:由于互为字母异位词的两个字符串包含的字母相同&#xff0c;因此对两个字符串分别进行排序之后得到的字符串一定是相同的&#xff0c;故可以将排序之后的字符串作为哈希表的键。 核心api: //将字符串转换为字符数组char[] ch str.toCharArray();…

「UG/NX」Block UI 指定点SpecifyPoint

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#

攻防世界-simple_php

原题 解题思路 flag被分成了两个部分&#xff1a;flag2&#xff0c;flag2。获得flag1需要满足变量a0且变量a≠0&#xff0c;这看起来不能实现&#xff0c;但实际上当变量a的值是字符时&#xff0c;与数字比较会发生强制类型转换&#xff0c;所以a为字符型数据即可&#xff0c;变…

C语言小练习(一)

&#x1f31e; “人生是用来体验的&#xff0c;不是用来绎示完美的&#xff0c;接受迟钝和平庸&#xff0c;允许出错&#xff0c;允许自己偶尔断电&#xff0c;带着遗憾&#xff0c;拼命绽放&#xff0c;这是与自己达成和解的唯一办法。放下焦虑&#xff0c;和不完美的自己和解…

【k8s、云原生】基于metrics-server弹性伸缩

第四阶段 时 间&#xff1a;2023年8月18日 参加人&#xff1a;全班人员 内 容&#xff1a; 基于metrics-server弹性伸缩 目录 一、Kubernetes部署方式 &#xff08;一&#xff09;minikube &#xff08;二&#xff09;二进制包 &#xff08;三&#xff09;Kubeadm 二…

算法与数据结构-哈希算法

文章目录 什么是哈希算法哈希算法的应用安全加密唯一标识数据校验散列函数负载均衡数据分片分布式存储 一致性哈希算法 什么是哈希算法 哈希算法的定义和原理非常简单&#xff0c;基本上一句话就可以概括了。将任意长度的二进制值串映射为固定长度的二进制值串&#xff0c;这个…