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

elementUI 循环出来的表单,怎么做表单校验?

在这里插入图片描述
数据结构如下:
diversionParamList: [
{
length: null,
positionNumber: null,
value: null,
}
]

思路:可根据 index 动态绑定 :props 属性值,校验规则写在:rules

<div class="config-item" v-for="(item, index) in form.diversionParamList" :key="index"><el-form-item :label="`分流配置${index + 1}`" :prop="`diversionParamList.${index}.positionNumber`":rules="{ required: true, message: '请输入位置', trigger: 'blur' }"><span class="config-item-text">位置:</span><el-input-number size="small" style="width: 100px" v-model="item.positionNumber" :min="0"></el-input-number></el-form-item><el-form-item :prop="`diversionParamList.${index}.length`":rules="{ required: true, message: '请输入长度', trigger: 'blur' }"><span class="config-item-text">长度:</span><el-input-number size="small" style="width: 100px" v-model="item.length" :min="1"></el-input-number></el-form-item><el-form-item :prop="`diversionParamList.${index}.value`":rules="[{ required: true, message: '请输入值', trigger: 'blur' }, { pattern: /^[0-9A-Fa-f]+$/, message: '必须是1-9或16进制字符:a-f或A-F' }]"><span class="config-item-text">值:</span><el-input :maxlength="item.length * 2" v-model="item.value" placeholder="请输入值" style="width: 150px"><template #prefix>0x&nbsp;</template></el-input></el-form-item><div class="button-group"><el-button v-if="index === form.diversionParamList.length - 1" type="primary" size="small"@click="addFormConfig()">新增</el-button><el-button v-if="index !== 0" type="danger" size="small" @click="delFormConfig(index)">删除</el-button></div>
</div>
http://www.dtcms.com/a/192086.html

相关文章:

  • InforSuite RDS 与django结合
  • React事件机制
  • 解决 Conda 安装 PyTorch 1.1.0 报错:excluded by strict repo priority(附三种解决方案)
  • [特殊字符]川翔云电脑:重新定义云端算力新纪元
  • 【爬虫】DrissionPage-3
  • 力扣-49.字母异位词分组
  • 10.2 LangChain v0.3全面解析:模块化架构+多代理系统如何实现效率飙升500%
  • 如何安全擦除 SSD 上的可用空间
  • 牛客网NC231954:斐波那契数列 (简单的数列问题)
  • Ubuntu离线安装Minio
  • DeepSeek模型架构详解:从Transformer到MoE
  • ‌JMeter聚合报告中的任务数和并发数区别
  • 【AI News | 20250515】每日AI进展
  • 数据结构——例题3
  • Function Calling
  • 【LLIE专题】基于码本先验与生成式归一化流的低光照图像增强新方法
  • OpenHarmony 5.1.0 Release目录结构详细解析(3级目录)
  • 解读RTOS 第八篇 · 内核源码解读:以 FreeRTOS 为例
  • AAC 协议
  • MyBatis 的分页插件 c
  • 交通运输与能源融合发展——光储充在交通上的应用完整解决方案
  • 【hadoop】sqoop案例 hive->mysql
  • python克洛伊婚纱摄影预约管理系统
  • 纯前端实现基于位置的天气和动态背景图片
  • 【优化算法】协方差矩阵自适应进化策略(Covariance Matrix Adaptation Evolution Strategy,CMA-ES)
  • [项目深挖]仿muduo库的并发服务器的解析与优化方案
  • 解决ubuntu20中tracker占用过多cpu,引起的风扇狂转
  • 人体肢体工作识别-一步几个脚印从头设计数字生命——仙盟创梦IDE
  • MySQL读写分离
  • 【CF】Day59——Codeforces Round 914 (Div. 2) D