Vue项目-Table添加Form表单校验
一、HTML
<template><div class="taskInfo"><el-form:model="generateParams":rules="formRules"ref="formRef"class="taskInfoForm"label-width="100px"><ul class="taskInfoSearch"><li><el-form-item label="类型" prop="type"><el-selectv-model="generateParams.type"placeholder="请选择类型"><el-option :value="1" label="aaa"></el-option><el-option :value="2" label="bbb"></el-option></el-select></el-form-item></li><li><el-form-item label="开始" prop="start"><el-inputv-model="generateParams.start"placeholder="请输入开始值"></el-input></el-form-item></li><li><el-form-item label="结束" prop="end"><el-inputv-model="generateParams.end"placeholder="请输入结束值"></el-input></el-form-item></li><li><el-form-item label="开始时间" prop="startTime"><el-date-pickerv-model="generateParams.startTime"type="datetime"placeholder="请选择开始时间"format="YYYY/MM/DD hh:mm:ss"value-format="YYYY-MM-DD h:m:s" /></el-form-item></li><li><el-form-item label="结束时间" prop="endTime"><el-date-pickerv-model="generateParams.endTime"type="datetime"placeholder="请选择结束时间"format="YYYY/MM/DD hh:mm:ss"value-format="YYYY-MM-DD h:m:s" /></el-form-item></li></ul><div class="taskInfoAddBtn"><el-button type="primary" @click="addRowData">新增表格数据</el-button></div><div class="taskInfoTab"><el-table:data="generateParams.studentInfo":cell-class-name="cellClassName":row-class-name="rowClassName"@cell-click="cellClick"><el-table-column label="姓名"><template #default="{ row, column }"><el-form-item:prop="'studentInfo.' + row.index + '.name'":rules="formRules.name"v-if="row.index == rowIndex && column.index == columnIndex"><el-inputv-model.number="row.name"type="number"@blur="hideInput"v-focus></el-input></el-form-item><span v-else>{{ row.name }}</span></template></el-table-column><el-table-column label="年龄"><template #default="{ row, column }"><el-form-item:prop="'studentInfo.' + row.index + '.age'":rules="formRules.age"v-if="row.index == rowIndex && column.index == columnIndex"><el-inputv-model.number="row.age"type="number"@blur="hideInput"v-focus></el-input></el-form-item><span v-else>{{ row.age }}</span></template></el-table-column><el-table-column label="性别"><template #default="{ row, column }"><el-form-item:prop="'studentInfo.' + row.index + '.sex'":rules="formRules.sex"v-if="row.index == rowIndex && column.index == columnIndex"><el-inputv-model.number="row.sex"type="number"@blur="hideInput"v-focus></el-input></el-form-item><span v-else>{{ row.sex }}</span></template></el-table-column><el-table-column label="操作" width="100"><template #default="{ row }"><el-button type="danger" link @click="delRowData(row)">删除</el-button></template></el-table-column></el-table></div></el-form><div class="generate"><el-button type="primary" @click="generate(formRef)">任务信息生成</el-button></div><!-- 任务信息生成信息模态框 --><TaskInfoModel ref="TaskInfoModelRef"></TaskInfoModel></div>
</template>
二、JS
<script setup>
// -------------------<<模块引入>>-------------------
import { ref, reactive, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
// -------------------<<变量声明>>-------------------
// 生成参数
const generateParams = reactive({type: 1, // 类型start: 1000000000, // 开始end: 2000000000, // 结束startTime: "2024-08-05 15:33:55", // 开始时间endTime: "2024-08-15 15:33:55", // 结束时间studentInfo: [// 任务区域{name: 123.1122331, // 姓名age: 80.12345621, // 年龄sex: 1200.1, // 性别},{name: 114.1122331, // 姓名age: 80.12345621, // 年龄sex: 1200.1, // 性别},{name: 114.1122331, // 姓名age: 80.12345621, // 年龄sex: 1200.1, // 性别},],
});
// form表单规则
const formRules = reactive({type: [{ required: true, message: "请选择类型", trigger: "change" }],start: [{ required: true, message: "请输入开始", trigger: "blur" }],end: [{ required: true, message: "请输入结束", trigger: "blur" }],startTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],name: [{ required: true, message: "请输入姓名", trigger: "blur" }],age: [{ required: true, message: "请输入年龄", trigger: "blur" }],sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
});
// 获取form表单ref
const formRef = ref();
// 行列index
const rowIndex = ref(null);
const columnIndex = ref(null);
// 是否允许编辑
const isEdit = ref(true);// -------------------<<函数定义>>-------------------
// 生成
const generate = (formEl) => {if (!formEl) return;formEl.validate((valid) => {if (valid) {console.log(generateParams);TaskInfoModelRef.value.openWin();} else {console.log("error submit!");//当验证失败跳转到空白的所在区域nextTick(() => {let isError = document.getElementsByClassName("is-error");isError[0].scrollIntoView({// 滚动到指定节点// 值有start,center,end,nearestblock: "center",// 值有auto、instant,smooth,缓动动画behavior: "smooth",});});return false;}});
};
// 表格单元格className回调方法
const cellClassName = ({ column, columnIndex }) => {column.index = columnIndex;
};
// 表格行className回调方法
const rowClassName = ({ row, rowIndex }) => {row.index = rowIndex;
};
// 表格单元格点击事件
const cellClick = (row, column) => {if (isEdit.value) {rowIndex.value = row.index;columnIndex.value = column.index;}
};
// input框失去焦点事件
const hideInput = (e) => {if (e.target.value) {rowIndex.value = null;columnIndex.value = null;isEdit.value = true;} else {isEdit.value = false;}
};
// 新增数据
const addRowData = () => {generateParams.studentInfo.push({name: "",age: "",sex: "",});
};
// 删除本行数据
const delRowData = (row) => {if (generateParams.studentInfo.length > 1) {generateParams.studentInfo.splice(row.index, 1);} else {ElMessage.warning("最少保留1条数据");}
};
// -------------------<<函数执行>>-------------------
onMounted(() => {});
</script>
三、CSS
<style lang="less" scoped>
.taskInfo {width: 100%;height: 100%;:deep(.taskInfoForm) {width: 100%;height: calc(100% - 80px);.taskInfoSearch {width: 100%;height: 120px;display: flex;align-items: center;flex-wrap: wrap;li {width: 25%;height: 50%;.el-form-item__label {color: #fff;}.el-form-item {width: 100%;height: 100%;margin-bottom: 0px;display: flex;align-items: center;.el-date-editor.el-input,.el-input,.el-select {width: 100% !important;}}}}.taskInfoAddBtn {width: 100%;height: 50px;display: flex;align-items: center;justify-content: flex-end;}.taskInfoTab {width: 100%;height: calc(100% - 170px);position: relative;.el-table {width: 100%;height: 100%;background: transparent !important;position: absolute;.el-form-item {width: 100%;margin-bottom: 0px;.el-form-item__content {margin-left: 0px !important;display: flex;align-items: center;justify-content: center;.el-input,.el-select {width: 80% !important;}}}td,th {text-align: center;}}}}.generate {width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;}
}
</style>
相关文章:
Vue项目-Table添加Form表单校验
一、HTML <template><div class"taskInfo"><el-form:model"generateParams":rules"formRules"ref"formRef"class"taskInfoForm"label-width"100px"><ul class"taskInfoSearch"&g…...
【iOS】—— 事件传递链和响应者链总结
事件传递链和响应者链总结 1. 事件传递链:事件传递链:传递流程:总结第一响应者: 2. 响应者链响应者链传递流程总结响应者链流程 总结: 之前也学习过这个内容这次在复习的时候,就想着写一下总结:…...
【多线程】初识进程和线程
💐个人主页:初晴~ 📚相关专栏:多线程 / javaEE初阶 前言 在我们之前编写的所有代码,都只能用上一个核心。众所周知,现在大多数CPU都有多个核心,但此时,无论如法优化程序,…...
1DCNN-2DResNet并行故障诊断模型
往期精彩内容: Python-凯斯西储大学(CWRU)轴承数据解读与分类处理 Python轴承故障诊断入门教学-CSDN博客 Python轴承故障诊断 (13)基于故障信号特征提取的超强机器学习识别模型-CSDN博客 Python轴承故障诊断 (14)高创新故障识别模型-CSDN…...
Java设计模式(原型模式)
定义 使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象。 角色 Prototype(抽象原型角色) ConcretePrototype(具体原型角色) Client(客户端角色 优点 简化对象的创建过程,…...
C/C++ 知识点:typedef 关键字
文章目录 一、typedef 关键字1、 基本用法2、常见用法2.1、为基本数据类型定义别名2.2、为结构体或联合体定义别名2.3、为指针类型定义别名2.4、为复杂模板类型定义别名 3、注意事项4、总结 前言: 在C(以及C语言)中,typedef 关键字…...
【Linux学习】进程间通信之 匿名管道 与 基于管道的进程池
🍑个人主页:Jupiter. 🚀 所属专栏:Linux从入门到进阶 欢迎大家点赞收藏评论😊 目录 🍑进程间通信🐬进程间通信目的 📚管道 📕管道的原理🐧用fork来共享管道原…...
小团队如何选需求管理软件?8款顶级推荐
本文将分享8款适合小团队的需求管理软件:PingCode、Worktile、Tapd、Teambition、禅道、Asana、Jama Connect、Aha!。 在小团队中管理需求时,寻找合适的软件工具常常让人头疼,不同的需求管理软件提供各种功能,但哪些功能真正适合…...
docker操作入门
1.创建镜像,使用当前文件 docker build -t experience . 2.运行容器 docker run -d -p 8501:8501 --name my-running-app my-python-api docker run -p 8508:8508 experience docker run -p 8508:8508 -p 8509:8509 experience 3.查看容器状态 docker ps docker p…...
简单的射箭小游戏网页源码
简单的射箭小游戏网页源码,对准靶心开启你的射击之旅吧 微信扫码免费获取源码...
Python | Leetcode Python题解之第331题验证二叉树的前序序列化
题目: 题解: class Solution:def isValidSerialization(self, preorder: str) -> bool:pre 1for i in preorder.split(,):if i.isdigit():if pre 0:return Falsepre 1else:if pre 0:return Falsepre - 1return pre 0...
0x3 “护网行动”守之道
一、护网防守目标系统 二、护网防守之利器 通过安全流程控制、安全技术保障、安全工具支撑、安全能力提升四个层次全面构成安全防御体系。 安全技术名称解释 IPS(入侵防御系统)WAF(Web应用防火墙)IDS(入侵检测系统&a…...
白骑士的Matlab教学高级篇 3.1 高级编程技术
系列目录 上一篇:白骑士的Matlab教学进阶篇 2.5 Simulink 高级编程技术在MATLAB中扮演着至关重要的角色,帮助用户更高效地编写复杂程序、提高代码的可维护性和可读性。本节将介绍面向对象编程、函数句柄与回调函数、错误处理与调试的相关内容。 面向对…...
haproxy简介与用法
一、负载均衡 1.1、概念: 负载均衡SLB(Server Load Balancer)是一种对流量进行按需分发的服务,通过将流量分发到不同的后端服务来扩展应用系统的服务吞吐能力,并且可以消除系统中的单点故障,提升应用系统…...
Geoscene Pro的三维
一、场景设置 1.3D视图分为全局场景和局部场景。在Geoscene Pro中,两个场景可以自由切换。 (1)全局场景有固定的坐标系GCS(WGS84、CGCS2000),并在全球比例尺下展示(全球范围)。可以…...
论文阅读 - Scaling Up k-Clique Densest Subgraph Detection | SIGMOD 2023
1. 论文背景 密集子图发现(Densest Subgraph Discovery)是图挖掘领域的一个基础研究方向,并且近年来在多个应用领域得到了广泛研究。特别是在生物学、金融学和社交网络分析等领域,密集子图的发现对理解复杂网络结构和行为具有重要…...
前端框架(三件套)
学习网站 HTML 系列教程(有广告) HTML(超文本标记语言) | MDN (mozilla.org)(英文不太友好) 1.HTML5 & CSS3 1.1HTML5表格 <!DOCTYPE html> <html lang"en"> <head>…...
MemoryCache 缓存 实用
MemoryCache 缓存 实用,相关逻辑代码里已详细注释, 在Java中创建一个单例模式(Singleton Pattern)的MyMemoryCache类,可以采用多种方法,其中最常见的是使用“饿汉式”和“懒汉式”(线程安全和非线程安全&am…...
Java设计模式(命令模式)
定义 将一个请求封装为一个对象,从而让你可以用不同的请求对客户进行参数化,对请求排队或者记录请求日志,以及支持可撤销的操作。 角色 抽象命令类(Command):声明用于执行请求的execute方法,通…...
什么是 CI/CD?
什么是 CI/CD? CI/CD(Continuous Integration/Continuous Deployment)是一种软件开发实践,旨在通过自动化的方式频繁地构建、测试和发布软件。CI/CD 可以显著提高软件交付的速度和质量,使团队能够更快地响应市场变化和…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
