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

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' },}},}
    }
    

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 组合总和IV(力扣---动态规划)
  • 多态(上)【C++】
  • 如何搞定日语翻译?试试这四款工具
  • FreeRTOS学习(2)延时函数的封装
  • 【白话树】之 树的基本知识、存储结构和二叉树转换
  • MySQL 子查询
  • hiresfix_latent 使用Upscale放大节点 对图片进行放大Comfyui
  • 众店绿色积分模式:引领消费新风尚,共筑商业新生态
  • 研1日记10
  • 深入探索系统架构设计
  • CCF编程能力等级认证GESP—C++7级—20240907
  • 利用Idea远程调试
  • Python 从入门到实战15(字符串其它操作)
  • Day14笔记-函数简介定义调用参数一
  • 【Java】基于JWT+Token实现完整登入功能(原理+实操图解)
  • 分享一款快速APP功能测试工具
  • 【5+】跨webview多页面 触发事件(二)
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • express.js的介绍及使用
  • Odoo domain写法及运用
  • python3 使用 asyncio 代替线程
  • RxJS: 简单入门
  • SegmentFault 社区上线小程序开发频道,助力小程序开发者生态
  • Spark RDD学习: aggregate函数
  • vue 个人积累(使用工具,组件)
  • Vue 2.3、2.4 知识点小结
  • Vue实战(四)登录/注册页的实现
  • WePY 在小程序性能调优上做出的探究
  • 电商搜索引擎的架构设计和性能优化
  • 缓存与缓冲
  • 前嗅ForeSpider采集配置界面介绍
  • 为什么要用IPython/Jupyter?
  • 详解移动APP与web APP的区别
  • 移动端解决方案学习记录
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • #### golang中【堆】的使用及底层 ####
  • #1014 : Trie树
  • #includecmath
  • (2)Java 简介
  • (2)STL算法之元素计数
  • (2024)docker-compose实战 (9)部署多项目环境(LAMP+react+vue+redis+mysql+nginx)
  • (html5)在移动端input输入搜索项后 输入法下面为什么不想百度那样出现前往? 而我的出现的是换行...
  • (Python第六天)文件处理
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (二)linux使用docker容器运行mysql
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (排序详解之 堆排序)
  • (区间dp) (经典例题) 石子合并
  • (十七)Flink 容错机制
  • (十三)Flask之特殊装饰器详解
  • (四)软件性能测试
  • (五)网络优化与超参数选择--九五小庞
  • (原+转)Ubuntu16.04软件中心闪退及wifi消失
  • (转)Linux下编译安装log4cxx