当前位置: 首页 > news >正文

Vue3+Element Plus 实现table表格中input的验证

实现效果

html部分

<template><div class="table"><el-form ref="tableFormRef" :model="form"><el-table :data="form.detailList"><el-table-column type="selection" width="55" align="center" /><el-table-column label="物资编号" align="center" prop="materialNo" /><el-table-column label="入库数量" align="center" prop="quantity" width="160"><template #default="scope"><el-form-item :prop="'detailList['+scope.$index+'].quantity'" :rules="tableFormRules.quantity"><el-input-number v-model="scope.row.quantity" placeholder="入库数量" :min="1" size="small":max="2147483647"></el-input-number></el-form-item></template></el-table-column><el-table-column label="所属仓库" align="center" width="180"><template #default="scope"><el-form-item :prop="'detailList['+scope.$index+'].warehouseType'":rules="tableFormRules.warehouseType"><el-select v-model="scope.row.warehouseType" placeholder="请选择所属仓库"><el-optionv-for="dict in la_work_area":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item></template></el-table-column><el-table-column label="金额" align="center" width="160"><template #default="scope"><el-form-item :prop="'detailList['+scope.$index+'].money'" :rules="tableFormRules.money"><el-input-number v-model="scope.row.money" :precision="2" @change="changeMoney" size="small":min="0" placeholder="请输入金额"></el-input-number></el-form-item></template></el-table-column><el-table-column label="操作" align="center"><template #default="scope"><el-button link type="danger" icon="Delete" @click="handleDelete(scope.$index)">删除</el-button></template></el-table-column></el-table></el-form></div><div class="tc mt16"><el-button @click="cancel">取消</el-button><el-button @click="submitForm" type="primary" color="#67C23A">提交</el-button></div>
</template>

 数据部分

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false);
const tableFormRef = ref<ElFormInstance>();
const tableFormRules = reactive({quantity: [{ required: true, message: "请输入数量", trigger: "change" }],warehouseType: [{ required: true, message: "请选择所属仓库", trigger: "change" }],money: [{ required: true, message: "请输入金额", trigger: "change" }]
});/** 提交按钮 */
const submitForm = () => {tableFormRef.value?.validate(async (valid: boolean) => {if (valid) {buttonLoading.value = true;//处理自己的业务逻辑proxy?.$modal.msgSuccess("操作成功");cancel();}});
};

相关文章:

Vue3+Element Plus 实现table表格中input的验证

实现效果 html部分 <template><div class"table"><el-form ref"tableFormRef" :model"form"><el-table :data"form.detailList"><el-table-column type"selection" width"55" align&…...

安宝特方案|解放双手,解决死角,AR带来质量监督新体验

AR质量监督 解放双手&#xff0c;解决死角 在当今制造业快速发展的背景下&#xff0c;质量监督成为确保产品高质量和完善的管理制度的关键环节。然而&#xff0c;传统的质量监督方式存在诸多挑战&#xff0c;如人工操作带来的效率低下、查岗不及时、摄像头死角等问题。 为了解…...

Django教程(005):基于ORM操作数据库的部门管理系统

文章目录 1、功能介绍2、新建项目3、创建app4、 表结构创建6、生成表7、静态文件管理8、部门管理8.1、部门列表8.2、添加部门8.3、删除部门8.4、编辑部门9、员工管理9.1、员工列表9.2、使用ModelForm添加员工9.3、编辑员工9.4、删除员工10、完整代码下载地址1、功能介绍 部门添…...

git等常用工具以及cmake

一、将git中的代码克隆进电脑以及常用工具介绍 1.安装git 首先需要安装git sudo apt install git 注意一定要加--recursive&#xff0c;因为文件中有很多“引用文件“&#xff0c;即第三方文件&#xff08;库&#xff09;&#xff0c;加入该选项会将文件中包含的子模…...

Mybatis(四)特殊SQL的查询:模糊查询、批量删除、动态设置表明、添加功能获取自增的主键

实体类&#xff1a; 数据库&#xff1a; 1、模糊查询 方案一&#xff1a; 不适用#{ }&#xff0c;’%?%‘ 问号是属于字符串的一部分 不会被解析成占位符&#xff0c;会被当作是我们字符串的一部分来解析&#xff0c;所以我们执行的语句中找不到占位符&#xff0c;但是我们却…...

JS原型与原型链

JS原型与原型链 JavaScript中一切引用类型都是对象&#xff0c;对象就是属性的集合。 Array类型、Function类型、Object类型、Date类型、RegExp类型等都是引用类型。 原型是什么 总计一句话就是&#xff08;继承里的父亲&#xff0c;你可以使用你的原型里的函数&#xff09;…...

Python编程学习第一篇——Python零基础快速入门(六)(4)异常处理

我们已经了解了Python的基本数据类型、变量和基本的逻辑控制语句&#xff0c;基于这些基础知识可以编写一些小程序了&#xff0c;但是在写程序的时候我们会发现&#xff0c;有时候程序并不是按我们预期的方向执行&#xff0c;有的直接报错&#xff0c;有的没有报错&#xff0c;…...

GraphHopper-map-navi_路径规划、导航(web前端页面版)

文章目录 一、项目地址二、踩坑环境三、问题记录3.1、graphhopper中地图问题3.1.1. getOpacity不存在的问题3.1.2. dispatchEvent不存在的问题3.1.3. vectorLayer.set(background-maplibre-layer, true)不存在set方法3.1.4. maplibre-gl.js.map不存在的问题3.1.5. Uncaught Ref…...

2-46 基于matlab的声音信号的短时能量、短时过零率、端点检测

基于matlab的声音信号的短时能量、短时过零率、端点检测。通过计算计算短时能量、调整能量门限&#xff0c;然后开始端点检测。输出可视化结果。程序已调通&#xff0c;可直接运行。 2-46 短时能量 短时过零率 端点检测 - 小红书 (xiaohongshu.com)...

力扣630.课程表 II

力扣630.课程表 II 反悔堆 将课程按照结束时间从大到小排序每次取一个判断当前是否能学完该课程如果能学完就将持续时间加入堆 更新答案如果学不完就判断该课程持续时间是否比之前学过的最大的还大 用时更短的话就将旧的弹出 class Solution {public:int scheduleCourse(ve…...

数字IC后端流程简述

1. 设计输入 目标:接收前端设计(如RTL代码和约束文件)的输出。 工具:前端设计工具(如Synopsys Design Compiler或Cadence Genus)。 步骤: 确保前端设计的RTL代码经过综合并生成了门级网表(Netlist)。 收集约束文件(Constraints),如时序约束(SDC文件)、功率约束等…...

数学建模--整数规划和非线性规划

目录 整数规划 非线性规划 总结 整数规划中分支定界法的具体步骤和实现细节是什么&#xff1f; 初始化&#xff1a; 分支&#xff1a; 定界&#xff1a; 剪枝&#xff1a; 终止条件&#xff1a; 非线性规划中的梯度法、牛顿法和拟牛顿法的比较分析有哪些&#xff1f;…...

Linux-查看dd命令进度

查看dd命令进度 一、概述1. 在一个终端执行拷贝任务2. 在另一终端执行进度命令 一、概述 系统&#xff1a;Ubuntu 22.04 在使用 dd 命令做拷贝大量数据的时候&#xff0c;因为并没有输出&#xff0c;所以比较难判断当前进度&#xff0c;因此可以使用下面的命令作为进度查看 …...

高效微调 100 多种大语言模型:先计算法,急速推理!

hiyouga/LLaMA-Factoryhttps://github.com/hiyouga/LLaMA-Factory Stars: 26.9k License: Apache-2.0 LLaMA-Factory 是一个用于高效微调 100 多个大型语言模型&#xff08;ACL 2024&#xff09;的 WebUI。 多种模型&#xff1a;LLaMA、LLaVA、Mistral、Mixtral-MoE、Qwen、Y…...

opencv grabCut前景后景分割去除背景

参考&#xff1a; https://zhuanlan.zhihu.com/p/523954762 https://docs.opencv.org/3.4/d8/d83/tutorial_py_grabcut.html 环境本次&#xff1a; python 3.10 提取前景&#xff1a; 1、需要先把前景物体框出来 需要坐标信息&#xff0c;可以用windows自带的画图简单提取像素…...

qt--电子相册

一、项目要求 设计一个电子相册&#xff0c;点击上一张&#xff0c;切换到上一张图片&#xff0c;点击下一张&#xff0c;切换到下一张图片。 要求&#xff1a;图片的展示可以循环&#xff08;QList<QString>&#xff09; 要求&#xff1a;界面美观 二、项目代码 本质是通…...

【MSP430】MSP430F5529几个定时器

MSP430F5529共有四个定时器&#xff0c;其中三个是Timer_A定时器&#xff0c;一个是Timer_B定时器。 这些定时器在MSP430F5529微控制器中发挥着重要的作用&#xff0c;不仅支持多重捕获/比较、PWM输出和内部定时功能&#xff0c;还具有丰富的中断处理能力。这些特性使得MSP430…...

苍穹外卖(一)之环境搭建篇

Ngnix启动一闪而退 启动之前需要确保ngnix.exe的目录中没有中文字体&#xff0c;在conf目录下的nginx.conf文件查看ngnix的端口号&#xff0c;一般默认为80&#xff0c;若80端口被占用就会出现闪退现象。我们可以通过logs/error.log查看错误信息&#xff0c;错误信息如下&…...

【限免】16PAM、16PSK、16QAM、16CQAM星座图及误码率【附MATLAB代码】

​微信公众号&#xff1a;智能电磁频谱算法 QQ交流群&#xff1a;949444104 主要内容 MATLAB代码 % Parameters M 16; N 4; % Number of circles for CQAM SNR_dB 0:2:25; % Extended SNR range to reach higher values num_symbols 1e5; % Total number of symbols for s…...

09-软件易用性

易用性是用户体验的一个重要方面&#xff0c;网站建设者一般会沉溺于自己的思维习惯&#xff0c;而造成用户使用的不畅。易用性不仅是专业UI/UE人员需要研究&#xff0c;对于网站建设其他岗位的人也应该了解一定的方法去检验和提升网站的易用性。通常对易用性有如下定义: 易理解…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...