Vue-vue项目Element-UI 表单组件内容要求判断

news2024/11/16 13:41:13

 整体添加判断

    <el-form
        ref="ruleFormRef"
        :model="formModel"
        class="demo-ruleForm"
        label-position="top"
        status-icon
        :rules="rules"
      >
        <el-form-item label="姓名" prop="applyUsers" class="form-title">
          <el-select-v2
            v-model="formModel.applyUsers"
            style="width: 100%"
            multiple
            filterable
            placeholder=" "
            clearable
            :options="applyUsers"
          />
        </el-form-item>
        <el-form-item label="调整积分" prop="applyNum" class="form-title">
          <el-input v-model.number="formModel.applyNum">
            <template #prepend>
              <el-select
                v-model="pointAbs"
                style="background: #fff; width: 100px"
              >
                <el-option label="加" value="+" />
                <el-option label="减" value="-" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="申请原因" prop="applyReason" style="width: 100%">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入"
            v-model="formModel.applyReason"
          />
        </el-form-item>
        <el-form-item label="附件文件" prop="uploadFiles" class="form-title">
          <general-file v-model="formModel.uploadFiles" :max-count="5" />
        </el-form-item>
      </el-form>
import type { FormRules } from "element-plus";

const rules = ref<FormRules>({
  applyNum: [
    {
      required: true,
      message: "必填项",
      trigger: "change"
    },
    {
      message: "只能输入数字",
      trigger: "change",
      type: "number"
    },
    {
      message: "最小为1",
      trigger: "change",
      type: "number",
      min: 1
    }
  ]
});

interface Form {
  applyUsers: string;
  applyNum: Number;
  applyReason: string;
  uploadFiles: object;
}

const formModel = ref<Form>({} as Form);

对应组件添加判断

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python代理服务器搭建,Python代理IP怎么使用?

随着互联网的普及&#xff0c;越来越多的人开始关注网络安全和隐私保护。代理服务器是一种可以隐藏用户真实IP地址的工具&#xff0c;通过代理服务器可以让人们在使用网络时更加安全和隐蔽。搭建Python代理服务器可以让我们更好地了解网络协议、加强网络安全等。 搭建Python代理…

【VSCode】设置自动保存

首先打开设置 然后在搜索栏上搜索auto save&#xff0c;此时可以看见&#xff0c;默认off不保存 files:autoSaveDelay 设置自动保存的间隔 1.AfterDelay 将在配置的 “#files:autoSaveDelay#” 后自动保存。 2.onFocusChange 当编辑器失去焦点时&#xff0c;将自动保存。也就…

laravel的默认首页怎么改-laravel框架默认欢迎页面如何修改

laravel的默认首页怎么改 搭建好的laravel的默认首页怎么改 我们有两种改动方式&#xff1a; 第一种修改默认路由&#xff1a; 下一步是要移除Laravel应用程序默认的欢迎页路由。这个路由可以在routes/web.php文件的顶部找到&#xff0c;看起来类似于以下代码&#xff1a; …

关于CSGO游戏搬砖,想给大家的几点忠告

关于CSGO游戏搬砖&#xff0c;想给大家的几点忠告 1、新出的箱子&#xff0c;里面开出的皮肤短时间内会溢价&#xff0c;价格虚高&#xff0c;后期会呈逐渐下跌趋势&#xff0c;这就是我们不让大家碰新品的原因&#xff0c;哪怕利润再高也不建议购入或者囤货&#xff0c;实在要…

蜻蜓c影视追剧系统-多个小程序添加说明

多小程序添加设置 蜻蜓c影视追剧 支持多小程序添加&#xff0c;也就是可以管理不同前端的小程序。 此处id 对应前端小程序的mp值 关于添加小程序&#xff1a; 此处有所有填写内容的参考方式&#xff0c;要注意是必须开通了微信支付才可以添加&#xff0c;这里需要添加证书信息…

60 最长有效括号

最长有效括号 题目描述题解1 DPstack题解2 stack题解3 DP题解4 左右指针 题目描述 给你一个只包含 ( 和 ) 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 示例 1&#xff1a; 输入&#xff1a;s "(()" 输出&#xff1…

CTF Reverse入门(1) 环境安装

前言 逆向重点是分析和理解计算机程序、二进制文件或者其他软件的逆向工程技术。在CTF比赛中&#xff0c;参赛者通常会收到一个或多个二进制文件、程序、固件或者其他类型的软件&#xff0c;他们的任务是分析这些文件&#xff0c;识别潜在的漏洞或安全问题。 学逆向需要会密码…

(三)QT中使用QVTKOpenGLNativeWidget的简单教程以及案例,利用PCLVisualizer显示点云

先添加一个带有ui的QT应用程序。 一、在ui界面中添加QVTKOpenGLNativeWidget控件 先拖出来一个QOpenGLWidget控件 修改布局如下&#xff1a; 然后将QOpenGLWidget控件提升为QVTKOpenGLNativeWidget控件&#xff0c;步骤如下&#xff1a; 右击QOpenGLWidget窗口&#xff0c;选…

【数据结构】线性表(六)堆栈:顺序栈及其基本操作(初始化、判空、判满、入栈、出栈、存取栈顶元素、清空栈)

文章目录 一、堆栈1. 定义2. 基本操作 二、顺序栈0. 顺序表1. 头文件和常量2. 栈结构体3. 栈的初始化4. 判断栈是否为空5. 判断栈是否已满6. 入栈7. 出栈8. 查看栈顶元素9. 清空栈10. 主函数11. 代码整合 堆栈Stack 和 队列Queue是两种非常重要的数据结构&#xff0c;两者都是特…

公司oa是什么?一般公司oa有什么样功能?

公司OA&#xff08;Office Automation&#xff09;是指通过计算机和信息技术来实现办公自动化的系统。 它提供了一系列的功能和工具&#xff0c;用于协调、管理和处理公司内部的日常事务和流程。OA系统旨在提高工作效率、加强信息交流与共享、简化业务流程&#xff0c;并提供便…

2023年中国人力资源服务外包市场规模、机构数量及细分领域规模[图]

人力资源服务外包是企业根据需要将某一项或几项人力资源管理工作或职能外包出去&#xff0c;交由其他企业或组织进行管理&#xff0c;以降低人力成本&#xff0c;实现效率最大化&#xff0c;企业专注自身核心业务发展。人力资源外包业务包括人事管理、人才派遣、薪酬财税、健康…

思维模型 晕轮效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。 1 晕轮效应应用 1.1 面试中的晕轮效应 一位外表英俊、谈吐得体的男士在面试中表现出色&#xff0c;面试官对他印象极佳&#xff0c;认为他具备领导才能和优秀的沟通能力。然而&#xff0…

Mac M1编译 swift 5.8.1源码

参考链接&#xff1a;https://github.com/apple/swift/blob/main/docs/HowToGuides/GettingStarted.md#system-requirements 编译 Swift 5.8 源码-六虎 解决M1芯片的Homebrew安装问题--For M1使用者_m1 homebrew安装_a_52hz的博客-CSDN博客 建议全程梯子 一、检查和配置环境…

丈母娘说:有编制的不如搞编程的

10月17日百度世界大会召开&#xff0c;据说文心大模型又牛X了&#xff0c;综合水平相比GPT4毫不逊色&#xff0c;真是个让人激动的消息&#xff0c;国产大模型的进展可以说是日新月异&#xff0c;我这耳朵边一直响彻四个字&#xff1a;遥遥领先。 不过今天我关注的重点不是什么…

ant的FileSet资源集合

一个FileSet是一组文件&#xff0c;这些文件可以通过从基目录开始的目录树中找到FileSet可以指定模式集和选取器来进行过滤和选择。 FileSet隐含已经支持的模式集<include>, <includesfile>, <exclude> 和 <excludesfile>&#xff0c;它们作为FileSet的…

02、MySQL-------主从复制

目录 七、MySql主从复制启动主从复制&#xff1a;原理&#xff1a;实现&#xff1a;1、创建节点2、创建数据库3、主从配置1、主节点2、从节点 4、测试&#xff1a;5、问题&#xff1a;1、uuid修改2、service_id3、读写不同步方法1&#xff1a;方法2&#xff1a; 七、MySql主从复…

解决 sharp: Installation error: unable to verify the first certificate

使用 plasmo 时报错如下&#xff1a; E:\chromeplugins>pnpm create plasmo ../.pnpm-store/v3/tmp/dlx-46852 | 2 ../.pnpm-store/v3/tmp/dlx-46852 | Progress: resolved 2, reused 2, downloaded 0, added 2, done &#x1f7e3; Plasmo v0.83.0 &…

开源云财务软件,财务软件源码,永久免费财务软件

纷析云SAAS云财务软件开源版 包含账套、凭证字、科目、期初、币别、账簿、报表、凭证、结账 技术交流群 扫码添加客服进群 商业版地址 纷析云商业版https://f3.fenxi365.com/ 正式环境&#xff0c;可注册账号直接使用或测试 功能对比 功能模块开源版商业版[技术重构]凭证✔…

微信小程序文本横向无缝滚动

背景&#xff1a; 微信小程序中列表宽度不够长&#xff0c;其中某字段显示不完整&#xff0c;因此要使其自动滚动。 &#xff08;最初看网上很多用定时器实现&#xff0c;但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表&#xff0c;…

【C++】详解priority_queue(优先级队列)与函数对象

目录 一、priority_queue 的介绍和使用 1.1priority_queue 的介绍 2.2priority_queue 的使用 二、仿函数 2.1什么是仿函数 2.2仿函数的作用 三、函数对象的特点&#xff08;知识点多&#xff09; 3.1分析特点5&#xff08;比较普通函数与函数对象&#xff09; 3.1.1利…