element-ui的Form 表单有些项的参数校验

项目场景:

提示:项目相关背景:

项目场景:有时候自己的Form 表单中的某几项引入的一些项不好去校验

在这里插入图片描述这样的咋去校验呢?


解决方案:

提示:问题的具体解决方案:

例如:写一个 prop="xxx" 这个必不可少,再写一个 change事件,然后在 change事件写判断逻辑,用自定义的参数hasOrganId来接收结果,用其来判断。

在这里插入图片描述
methods里面写change事件判断逻辑

methods: {
	changeOrganId (val) {
      this.hasOrganId = val.length > 0 ? true : false;
    },
}

重要的地方:

在这里插入图片描述


以下是详细代码:

   <el-form
      ref="memberDialogForm"
      :model="memberDialogForm"
      :rules="memberRules" 
    >
      <el-form-item label="所属组织" prop="organ_id">
        <el-cascader
          ref="myCascader"
          :props="props"
          popper-class="cascaderParent"
          style="width: 100%"
          placeholder="请选择组织"
          @change="changeOrganId"
          clearable>
          <template slot-scope="{ node, data }">
            <operate-text-tip
              :class="{'no-children': node.children.length === 0}"
              style="max-width: 100%"
              :show-text="data.label"
              :item-width="'100%'"
              show-type="width"/>
            <span v-if="!node.isLeaf"></span>
          </template>
        </el-cascader>
      </el-form-item>
    </el-form>
export default {
  data() {
	const checkOrganId = (rule, value, callback) => {
      if (this.hasOrganId) {
        return callback();
      } else {
        return callback(new Error('请选择组织'));
      }
    };
    return {
    	memberRules: {
        	organ_id: [
          		// {
          		//   required: true,
          		//   message: '请选择组织',
          		//   trigger: ['change', 'blur'],
          		// },
          		{
            		required: true,
            		validator: checkOrganId,
            		trigger: ['change', 'blur'],
          		},
        	],
      }
	hasOrganId: false,
   }
 }
methods: {
	changeOrganId (val) {
      this.hasOrganId = val.length > 0 ? true : false;
    },
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/638884.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

将Surface的分辨率减半以省电(二合一本\笔记本电脑适用)

【完全自定义分辨率教程】这篇教程用于将Surface之类的高分屏&#xff08;高分辨率&#xff09;的二合一本或笔记本等的分辨率调整为原来的一半&#xff0c;以实现省电等目的。 下载CRU&#xff08;Custom Resolution Utility&#xff09;解压后&#xff0c;打开CRU.exe选择当…

【每日刷题】Day48

【每日刷题】Day48 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 872. 叶子相似的树 - 力扣&#xff08;LeetCode&#xff09; 2. 114. 二叉树展开为链表 - 力扣&…

每日一题《leetcode--382.链表随机结点》

https://leetcode.cn/problems/linked-list-random-node/ 这道题我们首先看到题目中的要求&#xff1a;在单链表中随机选取一个链表中的结点&#xff0c;要使每个结点被选取的概率是一样的。 当我们看到随机这两个字时&#xff0c;应该就会想起rand()这个函数。接着我们把使用这…

Rhinoceros v7.5 解锁版安装教程 (3D三维造型软件)

前言 Rhinoceros 中文名称犀牛是一款超强的三维建模工具&#xff0c;全称Rhinoceros&#xff0c;Rhino是美国Robert McNeel & Assoc开发的PC上强大的专业3D造型软件&#xff0c;它可以广泛地应用于三维动画制作、工业制造、科学研究以及机械设计等领域。它能轻易整合3DS M…

SpringFramework实战指南

二、SpringFramework实战指南 目录 一、技术体系结构 1.1 总体技术体系1.2 框架概念和理解 二、SpringFramework介绍 2.1 Spring 和 SpringFramework概念2.2 SpringFramework主要功能模块2.3 SpringFramework 主要优势 三、Spring IoC容器和核心概念 3.1 组件和组件管理概念3…

element-ui手机区号+手机号

需求场景 项目开发中对方要求手机号带上全球区号 需求分析 项目使用的是若依前端框架&#xff0c;element-ui的框架。尝试使用已经网上的组件vue-country-intl等发现不怎么适配element-ui的样式等。这还不是关键的&#xff0c;关键的是弹窗中使用这些组件发现区号的下拉展示框…

面试框架【面试准备】

前言 2023-9-12 12:12:04 2023-09-14 16:13:04 公开发布于 2024-5-22 00:16:21 以下内容源自《【面试准备】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://blog.csdn.net/qq_51625007 禁止其他平…

文件流下载优化:由表单提交方式修改为Ajax请求

如果想直接看怎么写的可以跳转到 解决方法 节&#xff01; 需求描述 目前我们系统导出文件时&#xff0c;都是通过表单提交后&#xff0c;接收文件流自动下载。但由于在表单提交时没有相关调用前和调用后的回调函数&#xff0c;所以我们存在的问题&#xff0c;假如导出数据需…

idea上传git命令

git init git remote add origin git add . git commit -m "标题" git push -u origin master

《Fundamentals of Power Electronics》——开关电源环路稳定性分析(中)

7.传递函数 传递函数&#xff0c;简单的理解就是输入和输出之间的关系。通过传递函数可以知道这个系统对不同频率信号响应&#xff0c;而这些响应通过画出传递函数的波特图又能知道传递函数在某点频率的相位和增益。一个系统要稳定可靠&#xff0c;那就需要一定的相位裕度和增…

基础3 探索JAVA图形编程桌面:逻辑图形组件实现

在一个宽敞明亮的培训教室里&#xff0c;阳光透过窗户柔和地洒在地上&#xff0c;教室里摆放着整齐的桌椅。卧龙站在讲台上&#xff0c;面带微笑&#xff0c;手里拿着激光笔&#xff0c;他的眼神中充满了热情和期待。他的声音清晰而洪亮&#xff0c;传遍了整个教室&#xff1a;…

【嵌入式芯片开发】不使用MicroLib的串口重定向万能预编译配置(适用于ARMCC、AC6等不同的编译器及版本)

【嵌入式芯片开发】不使用MicroLib的串口重定向万能预编译配置&#xff08;适用于ARMCC、AC6等不同的编译器及版本&#xff09; 文章目录 基本的串口重定向接收中断与scanf不能同时工作重定向卡死、低功耗一直唤醒 串口重定向万能预编译配置附录&#xff1a;Cortex-M架构的Sys…

2024042102-array-list

数组 Array 一、前言 数组是数据结构还是数据类型&#xff1f; 数组只是个名称&#xff0c;它可以描述一组操作&#xff0c;也可以命名这组操作。数组的数据操作&#xff0c;是通过 idx->val 的方式来处理。它不是具体要求内存上要存储着连续的数据才叫数据&#xff0c;而…

Qt moc系统的黑魔法?

Qt的元对象系统&#xff08;Meta-Object System&#xff09;是Qt框架的核心功能之一&#xff0c;为C语言增加了一些动态特性&#xff0c;借助元对象系统Qt可以实现以下功能 信号与槽机制&#xff08;Signals and Slots&#xff09;运行时类型信息&#xff08;Run-Time Type In…

倍思科技获14项红点设计奖,引领中国移动数码品牌创新风潮

近日,国际红点设计大奖公布了2024年获奖名单,中国移动数码品牌倍思科技凭借其出色的产品设计实力,一举斩获14项红点设计奖。这些获奖产品涵盖了充电、音频、车用等多个品类,展现了倍思科技在创新设计和实用功能方面的卓越成就。 红点设计奖作为世界知名设计竞赛,素有“设计界的…

【论文笔记】| 微调LLM晶体生成

【论文笔记】| 微调LLM晶体生成 Fine-Tuned Language Models Generate Stable Inorganic Materials as Text NYU, ICLR 2024 Theme&#xff1a;Material Generation Main work&#xff1a; 微调大型语言模型以生成稳定的材料 可靠性&#xff1a;在样本结构中&#xff0c;90% …

【因果推断从入门到精通二】随机实验3

目录 检验无因果效应假说 硬币投掷的特殊性何在&#xff1f; 检验无因果效应假说 无因果效应假说认为&#xff0c;有些人存活&#xff0c;有些人死亡&#xff0c;但接受mAb114治疗而不是ZMapp与此无关。在174例接受mAb14治疗的患者中&#xff0c;113/17464.9%存活了28天&…

7、按钮无法点击

不能点击&#xff0c;打开f12&#xff0c;删除disabled

基于python向量机算法的数据分析与预测

3.1 数据来源信息 该数据集来源于Kaggle网站&#xff0c;数据集中包含了罗平菜籽油的销售数据&#xff0c;每行数据对应一条记录&#xff0c;记录了罗平菜籽油销售数据。其中&#xff0c;菜籽产量、菜籽价格和菜籽油价格是数值型数据&#xff0c;共2486条数据。 通过读取Exce…

基于transformers框架实践Bert系列2--命名实体识别

本系列用于Bert模型实践实际场景&#xff0c;分别包括分类器、命名实体识别、选择题、文本摘要等等。&#xff08;关于Bert的结构和详细这里就不做讲解&#xff0c;但了解Bert的基本结构是做实践的基础&#xff0c;因此看本系列之前&#xff0c;最好了解一下transformers和Bert…