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

element form rules 验证数组对象属性时如何写判断规则

  • 需求:一个el-form-item里放了2个下拉选择框,规定是最少选择一个,最多这俩都选择值;下拉框的值设置为对象了,所以这俩select的值组成了一个数组里的两个对象

  • 逻辑:感觉只需要把第一个下拉框值(即数组【0】)设置为必选属性,对起属性值进行判断,为空则报错

  • 知识点:elemenr的rules判断规则,如果是对对象的某个属性进行判断,需要双引号加改对象属性键名el-form-item 上的prop 属性设置为需校验的字段名即可。

  • 另外:如果需要select的值为对象,需要在select 上 加上value-key="对象里属性的唯一值一般写userId"el-option的:key="item.userId这俩值所用的属性名要一致

  • 代码

    	// html
    	<el-form-item label="参与人"  prop="auditors[0].userId">
    	                        <el-select v-model="form.data.auditors[0]" value-key="userId">
    	                            <el-option v-for="item in classname" :key="item.userId" :label="item.userName" :value="item"></el-option> 
    	                        </el-select>
    	                        <el-select  v-model="form.data.auditors[1]" value-key="userId" >
    	                            <el-option v-for="item in classname" :key="item.userId" :label="item.userName" :value="item"></el-option>                         
    	                        </el-select>
    	                    </el-form-item>
    
    //js
    data(){
    	return {
    	classname:[
    		{
    		    "userId": 1,
    		    "userName": "张三"
    		},
    		{
    		    "userId": 2,
    		    "userName": "lisi"
    		},
    	],
    	form:{
                    
                    data:{
                        auditors:[
                            {userId:null,userName:null},
                            {userId:null,userName:null},
                        ]
                    },
                    rules:{
                        "auditors[0].userId":{ required: true, message: '参与人', trigger: 'change' },
    
                    }
                },
    	}
    }
    

http://www.kler.cn/news/302519.html

相关文章:

  • 测试驱动开发(TDD)学习分享-下篇
  • Python知识点:如何使用Python进行图像批处理
  • MySQL中的约束
  • 系统分析师10:知识产权与标准化
  • 大模型中的多模态概念指的是什么
  • (计算机网络)应用层
  • Tomcat_使用IDEA开发javaWeb工程并部署运用
  • 爱普生相机SD卡格式化后数据恢复指南
  • C++速通LeetCode第5题-回文链表
  • 防止文件外发泄密有什么方法?这7防外发方式可以看下!
  • 数字化转型背景下低代码开发模式变革的研究
  • Excel图表生成:自动化创建与修改Excel图表的技术指南
  • 基于鸿蒙API10的RTSP播放器(五:拖动底部视频滑轨实现跳转)
  • pytorch torch.triu函数介绍
  • python实现进化算法
  • 在国产芯片上实现YOLOv5/v8图像AI识别-【4.4】RK3588网络摄像头推理后推流到RTSP更多内容见视频
  • 海思SD3403(21AP10, 108DC2910 )4K60 的 ISP 图像处理能力,4Tops INT8算力
  • 数据结构2 :双向链表和内核链表
  • mysql可重复读不能解决幻读吗?
  • linux————根据端口查找运行目录的三种方法
  • STM32内部闪存FLASH(内部ROM)、IAP
  • 信息安全工程师题
  • ASR(自动语音识别)识别文本效果的打分总结
  • 用Cri-O,Sealos CLI,Kubeadm方式部署K8s高可用集群
  • 【docker】了解什么是Docker
  • 欧洲麻花钻市场主要企业市场占有率及排名
  • Framework | 在Android中运行时获取顶层Activity并处理业务逻辑
  • 【测试】——自动化测试入门(Selenium环境搭建)
  • Golang | Leetcode Golang题解之第395题至少有K个重复字符的最长子串
  • IPC$漏洞多位密码爆破方法