当前位置: 首页 > 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>

相关文章:

  • 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
  • 央视起底“字画竞拍”网络传销案:涉案44亿元,受害者众多
  • 中国证券业协会修订发布《证券纠纷调解规则》
  • 泰山、华海、中路等山东险企综合成本率均超100%,承保业务均亏损
  • 诠释微末处的丰盈:“上海制造佳品汇”首届海外专场即将亮相日本大阪
  • 沪喀同心|为新疆青少年提供科普大餐,“小小博物家(喀什版)”启动
  • 前四个月人民币贷款增加10.06万亿元,4月末M2余额同比增长8%