el-table 使用el-form 表单验证

news/2025/1/10 15:58:24/

1. form定义时,需要定义tableData

javascript">const supplyForm = ref({ tableData: [] })const supplyFormRules = reactive({bomNumber: [{ required: true, message: '请填写物料编号', trigger: 'blur' }],bomName: [{ required: true, message: '请填写名称', trigger: 'blur' }]
})

2. html绑定

		<el-form :model="supplyForm" ref="supplyFormRef" inline-message class="supply-form-table"><el-table:data="supplyForm.tableData"borderstyle="width: 100%"@cell-click="handleCellEnter"scrollbar-always-onhighlight-current-rowempty-text="暂无数据"max-height="420"stripe:header-cell-style="{ background: '#f5f7fa' }":row-style="{ 'background-color': '#fdf6ec' }"><el-table-column label="序号" prop="bomNo" width="80"><template v-slot="scope"> {{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="bomNumber" label="物料编号"><template #default="scope"><el-form-item :prop="`tableData.[${scope.$index}].bomNumber`" :rules="supplyFormRules.bomNumber"><el-input class="cell-input" v-model="scope.row.bomNumber" size="small"/></el-form-item></template></el-table-column><el-table-column prop="bomName" label="名称"><template #default="scope"><el-form-item :prop="`tableData.[${scope.$index}].bomName`" :rules="supplyFormRules.bomName"><el-input class="cell-input" v-model="scope.row.bomName" size="small"/></el-form-item></template></el-table-column><el-table-column label="操作"><template #default="scope"><el-button link @click="() => deleteSupplyRow(scope.row)">删除</el-button></template></el-table-column></el-table></el-form>

3. tableData赋值

javascript">supplyForm.value.tableData.push(bomItem)


http://www.ppmy.cn/news/1562013.html

相关文章

Solidity合约编写(三)

解决问题&#xff1a; 在 Solidity 合约中使用 Chainlink 获取 ETH/USD 的价格&#xff08;汇率&#xff09;&#xff0c;需要使用 Chainlink 的 AggregatorV3Interface 接口。以下是一个样板代码&#xff0c;展示了如何在测试链&#xff08;如 Goerli 或 Sepolia&#xff09;…

相机镜头竞品选型的主要参考参数和选型方法

目录 一、镜头主要参数&#xff1a; 1. 焦距&#xff08;Focal Length&#xff09; 2.光圈&#xff08;Iris&#xff09; 3.对应最大CCD尺寸&#xff08;Sensor Size&#xff09; 4.接口&#xff08;Mount&#xff09; 5.景深&#xff08;Depth of Field, DOF&#xff09…

VUE3组合式——响应式数据ref、reactive

VUE3 组合式 —— 响应式数据 ref、reactive 学习笔记 一、引言 在 Vue3 中&#xff0c;响应式数据是构建动态交互应用的关键部分。其中&#xff0c;ref 和 reactive 是处理响应式数据的重要函数&#xff0c;深入理解它们对于高效开发 Vue3 应用至关重要。 二、ref 函数 基…

代码实战:基于InvSR对视频进行超分辨率重建

Diffusion Models专栏文章汇总:入门与实战 前言:上一篇博客《使用Diffusion Models进行图像超分辩重建》中讲解了InvSR的原理,博主实测的效果是非常不错的,和PASD基本持平。这篇博客就讲解如何利用InvSR对视频进行超分辨率重建。 目录 环境准备 代码讲解 环境准备

在Spring Boot项目中使用Zookeeper和Curator实现高效、可靠的分布式锁

要在 Spring Boot 项目中使用 Zookeeper 和 Curator 实现高效、可靠的分布式锁&#xff0c;可以参考以下步骤和优化建议&#xff1a; 1. 引入依赖 在 pom.xml 中添加 Curator 和 Zookeeper 相关依赖&#xff1a; <dependencies><dependency><groupId>org.…

开关不一定是开关灯用 - 命令模式(Command Pattern)

命令模式&#xff08;Command Pattern&#xff09; 命令模式&#xff08;Command Pattern&#xff09;命令设计模式命令设计模式结构图命令设计模式涉及的角色 talk is cheap&#xff0c; show you my code总结 命令模式&#xff08;Command Pattern&#xff09; 命令模式&…

maven下载依赖报错:on-resolvable parent POM xxx

maven 构建项目时报错 Non-resolvable parent POM for com.itheima:integation-mybatis:0.0.1-SNAPSHOT: org.springframework.boot:spring-boot-starter-parent:pom:2.5.3 failed to transfer from http://maven.aliyun.com/nexus/content/groups/public/ during a previous a…

[备忘.OFD]OFD是什么、OFD与PDF格式文件的互转换

‌OFD&#xff08;Open Fixed-layout Document&#xff09;是一种由工业和信息化部软件司牵头中国电子技术标准化研究院制定的版式文档国家标准&#xff0c;属于中国的一种自主格式‌‌。OFD旨在打破政府部门和党委机关电子公文格式不统一的问题&#xff0c;以方便电子文档的存…