当前位置: 首页 > 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.xdnf.cn/news/458209.html

相关文章:

  • elementUI如何动态增减表单项
  • 【Trae插件】从0到1,搭建一个能够伪装成网页内容的小说阅读Chrome插件
  • 交叉编译源码的方式移植ffmpeg-rockchip
  • 【学习心得】WSL2安装Ubuntu22.04
  • 前端npm的核心作用与使用详解
  • 【kafka】基本命令
  • Node.js 循环依赖问题详解:原理、案例与解决方案
  • 【hadoop】Kafka 安装部署
  • “傅里叶变换算法”来检测纸箱变形的简单示例
  • Android Coli 3 ImageView load two suit Bitmap thumb and formal,Kotlin(七)
  • MySQL 8.0 OCP 1Z0-908 101-110题
  • 【Conda】环境应用至JupyterLab
  • 使用java -jar命令指定VM参数-D运行jar包报错问题
  • 游戏引擎学习第281天:在房间之间为摄像机添加动画效果
  • 【虚幻引擎】UE5独立游戏开发全流程(商业级架构)
  • 什么是路由器环回接口?
  • 专项智能练习(加强题型)
  • OpenCV图像旋转原理及示例
  • IOS CSS3 right transformX 动画卡顿 回弹
  • 生产级编排AI工作流套件:Flyte全面使用指南 — Core concepts Tasks
  • day21:零基础学嵌入式之数据结构
  • X-R1:训练医疗推理大模型
  • AD 规则的导入与导出
  • W1R3S: 1.0.1靶场
  • 10.2 LangChain v0.3全面解析:模块化架构+多代理系统如何实现效率飙升500%
  • 团队项目培训
  • 题解:P12207 [蓝桥杯 2023 国 Python B] 划分
  • 编译OpenSSL时报错,Can‘t locate IPC/Cmd.pm in @INC perl环境
  • JVM方法区核心技术解析:从方法区到执行引擎
  • 什么是 NB-IoT ?窄带IoT 应用