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

element-plus 表单组件 之element-form

elment-plus的表单组件的标签有el-form,el-form-item。
单个el-form标签内包裹若干个el-form-item,el-form-item包裹具体的表单组件,如输入框组件,多选组件,日期组件等。

el-form组件的主要作用是:提供统一的布局给其他表单组件,其他组件可以继承表单组件的size,以及规则校验

form表单主要属性如下:

属性名说明默认值
model表单数据对象
rules表单验证规则
inline行内表单模式false
label-positionleft right label-widthright
label-width‘50px’ auto‘’
show-message是否显示校验错误信息true
inline-message是否以行内形式展示校验信息false
status-icon是否在输入框中显示校验结果反馈图标false
size表单尺寸

form-item 主要属性如下:

属性名说明默认值
propvalidate,resetField时使用,一般和v-model值保持一致
label标签文本

用法示例

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance,FormRules  } from 'element-plus'const formRef = ref<FormInstance>()interface Good {goodName:stringstock:numbercreateDate:Datedescription:string
}const checkStock = (rule: any, value: any, callback: any) => {console.log("checkStock ",value)if (!value) {return callback(new Error('Please input the age'))}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('Please input digits'))} else {if (value < 10) {callback(new Error('stock must be greater than 10'))} else {callback()}}}, 1000)
}const ruleForm=reactive<FormRules<Good>>({goodName:[{required:true,message:"please input goodName",trigger:'change'}],stock:[{validator:checkStock}]
})const goodForm=ref<Good>({goodName:"",stock:10,createDate:new Date(),description:""
});const submitForm=()=>{formRef.value.validate((valid:Boolean)=>{if (valid){console.log("submit success ",goodForm) ;}else{console.log("form validate error ");}})
}const resetForm=()=>{formRef.value.resetFields()
}</script><template><el-form :model="goodForm" status-icon label-position="left" label-width="auto" ref="formRef" :rules="ruleForm"><el-form-item label="goodName" prop="goodName"><el-input v-model="goodForm.goodName" placeholder="please enter goodName"></el-input></el-form-item><el-form-item label="stock" prop="stock"><el-input-number  v-model="goodForm.stock" :step="1"></el-input-number></el-form-item><el-form-item label="createDate" prop="createDate"><el-date-picker type="date" v-model="goodForm.createDate" format="YYYY-MM-DD" clearable></el-date-picker></el-form-item><el-form-item label="description" prop="description"><el-input type="textarea" v-model="goodForm.description" placeholder="please enter description"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">submit</el-button><el-button @click="resetForm">reset</el-button></el-form-item></el-form></template><style scoped></style>

在这里插入图片描述
https://element-plus.org/zh-CN/component/form.html#form-attributes

相关文章:

element-plus 表单组件 之element-form

elment-plus的表单组件的标签有el-form,el-form-item。 单个el-form标签内包裹若干个el-form-item,el-form-item包裹具体的表单组件&#xff0c;如输入框组件&#xff0c;多选组件&#xff0c;日期组件等。 el-form组件的主要作用是&#xff1a;提供统一的布局给其他表单组件&…...

redis持久化主从哨兵分片集群

文章目录 1. 单点Redis的问题数据丢失问题并发能力问题故障恢复问题存储能力问题 2. Redis持久化 -> 数据丢失问题RDB持久化linux单机安装Redis步骤RDB持久化与恢复示例&#xff08;详细&#xff09;RDB机制RDB配置示例RDB的fork原理总结 AOF持久化AOF配置示例&#xff08;详…...

IOS Swift 从入门到精通: 结构体的访问控制、静态属性和惰性

文章目录 初始化器引用当前实例惰性属性静态属性和方法访问控制总结初始化器 初始化器是一种特殊方法,可提供创建结构体的不同方式。所有结构体都默认带有一个初始化器,称为成员初始化器- 它会要求您在创建结构体时为每个属性提供一个值。 User如果我们创建一个具有一个属性…...

SQL题:未完成率较高的50%用户近三个月答卷情况

SQL题&#xff1a;未完成率较高的50%用户近三个月答卷情况 这是一道牛客网上SQL进阶图库中的一道困难题目&#xff0c;个人花了近两个小时才通过所有用例。之所以想记录下来是因为这道题算是一个很考验基本功的题目&#xff0c;也不乏一些SQL中的技巧。下面我们逐步分析&#…...

挑战与机遇的交织

AI与音乐创作&#xff1a;挑战与机遇的交织 引言 近年来&#xff0c;人工智能技术的迅猛发展使得其在各个领域都展现出了巨大的潜力和影响力&#xff0c;音乐创作领域也不例外。最近上线的音乐大模型&#xff0c;无疑是这一趋势的一个重要节点&#xff0c;它极大地降低了素人…...

Java项目:基于SSM框架实现的精品酒销售管理系统分前后台【ssm+B/S架构+源码+数据库+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的精品酒销售管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功…...

[论文笔记]Are Large Language Models All You Need for Task-Oriented Dialogue?

引言 今天带来论文Are Large Language Models All You Need for Task-Oriented Dialogue?的笔记。 主要评估了LLM在完成多轮对话任务以及同外部数据库进行交互的能力。在明确的信念状态跟踪方面&#xff0c;LLMs的表现不及专门的任务特定模型。然而&#xff0c;如果为它们提…...

Django 模版过滤器

Django模版过滤器是一个非常有用的功能&#xff0c;它允许我们在模版中处理数据。过滤器看起来像这样&#xff1a;{{ name|lower }}&#xff0c;这将把变量name的值转换为小写。 1&#xff0c;创建应用 python manage.py startapp app5 2&#xff0c;注册应用 Test/Test/sett…...

计算机组成原理 —— 存储系统(DRAM和SRAM,ROM)

计算机组成原理 —— 存储系统&#xff08;DRAM和SRAM&#xff09; DRAM和SRAMDRAM的刷新DRAM地址复用ROM&#xff08;Read-Only Memory&#xff08;只读存储器&#xff09;&#xff09; 我们今天来看DRAM和SRAM&#xff1a; DRAM和SRAM DRAM&#xff08;动态随机存取存储器&…...

第22篇 Intel FPGA Monitor Program的使用<五>

Q&#xff1a;如何用Intel FPGA Monitor Program创建C语言工程并运行呢&#xff1f; A&#xff1a;总体过程与创建汇编语言工程类似&#xff0c;不同的是在指定程序类型时选择C Program。 后续用到DE2-115开发板的硬件如LED、SW和HEX等外设时&#xff0c;还需要将描述定义这些…...

网信办公布第六批深度合成服务算法备案清单,深兰科技大模型入选

6月12日&#xff0c;国家互联网信息办公室发布了第六批深度合成服务算法备案信息&#xff0c;深兰科技硅基知识智能对话多模态大模型算法通过相关审核&#xff0c;成功入选该批次《境内深度合成服务算法备案清单》。同时入选的还有腾讯混元大模型多模态算法、支付宝图像生成算法…...

ES 8.14 向量搜索优化

参考&#xff1a;https://blog.csdn.net/UbuntuTouch/article/details/139502650 检索器&#xff08;standard、kNN 和 RRF&#xff09; 检索器&#xff08;retrievers&#xff09;是搜索 API 中的一种新抽象概念&#xff0c;用于描述如何检索一组顶级文档。检索器被设计为可以…...

查看 MAC 的 shell 配置文件

在Mac上&#xff0c;shell的配置文件主要取决于您当前使用的shell。从macOS Catalina开始&#xff0c;Mac使用zsh作为默认登录Shell和交互式Shell。以下是关于Mac上zsh shell配置文件的一些详细信息&#xff1a; 查看当前使用的shell&#xff1a; 要查看当前正在使用的shell&am…...

前端下载文件流,axios设置responseType: arraybuffer/blob无效

项目中调用后端下载文件接口&#xff0c;设置responseType: arraybuffer,实际拿到的数据data是字符串 axios({method: post,url: /api/v1/records/recording-file/play,// 如果有需要发送的数据&#xff0c;可以放在这里data: { uuid: 06e7075d-4ce0-476f-88cb-87fb0a1b4844 }…...

动手学深度学习(Pytorch版)代码实践 -卷积神经网络-14模型构造

14模型构造 import torch from torch import nn from torch.nn import functional as F#通过实例化nn.Sequential来构建我们的模型&#xff0c; 层的执行顺序是作为参数传递的 net1 nn.Sequential(nn.Linear(20, 256), nn.ReLU(), nn.Linear(256,10)) """ nn.…...

Django 模版转义

1&#xff0c;模版转义的作用 Django模版系统默认会自动转义所有变量。这意味着&#xff0c;如果你在模版中输出一个变量&#xff0c;它的内容会被转义&#xff0c;以防止跨站脚本攻击&#xff08;XSS&#xff09;。例如&#xff0c;如果你的变量包含HTML标签&#xff0c;这些…...

[数据集][目标检测]药片药丸检测数据集VOC+YOLO格式152张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;152 标注数量(xml文件个数)&#xff1a;152 标注数量(txt文件个数)&#xff1a;152 标注类别…...

Android SurfaceFlinger——HWC图层合成器加载(四)

在前面文章中的 Android.bp 文件中,我们可以看到里面加载了图层合成器和图形内存分配器的 HAL 服务,这里篇我们就来详细介绍一下其中的图层合成器——HWC。 一、HWC简介 HWC,全称为 Hardware Composer,是 Android 系统中一个至关重要的组件,位于硬件抽象层(HAL)。它的主…...

OpenCV--图像金字塔

图像金字塔 图像金字塔高斯金字塔拉普拉斯金字塔 图像金字塔 import cv2""" 图像金字塔&#xff1a;同一图像不同分辨率的子图合集 主要用于图像分割 """高斯金字塔 """ 高斯金字塔&#xff1a;通过高斯平滑和亚采样(采样后图像…...

创意产业如何应对AI的挑战。

最近的一个月&#xff0c;音乐领域迎来了一个革命性的变化。一系列音乐大模型轮番上线&#xff0c;它们以惊人的创作能力&#xff0c;将素人生产音乐的门槛降到了最低。这些AI音乐模型的出现&#xff0c;引发了关于AI是否会彻底颠覆音乐圈的讨论。然而&#xff0c;短暂的兴奋过…...

从火星车到智能家电:聊聊那些藏在身边的RTOS(FreeRTOS、VxWorks、RT-Thread)

从火星车到智能家电&#xff1a;聊聊那些藏在身边的RTOS 当你清晨按下智能咖啡机的启动键&#xff0c;或是用手机远程调节空调温度时&#xff0c;可能不会想到这些设备内部运行着与NASA火星车同源的实时操作系统&#xff08;RTOS&#xff09;。这类专为即时响应设计的系统&…...

RabbitMQ 3.13.0实战:5分钟搞定MQTT 5.0协议配置与特性测试(附Docker命令)

RabbitMQ 3.13.0实战&#xff1a;5分钟搞定MQTT 5.0协议配置与特性测试&#xff08;附Docker命令&#xff09; 物联网开发者们&#xff0c;好消息&#xff01;RabbitMQ 3.13.0正式支持MQTT 5.0协议了。作为消息中间件的标杆产品&#xff0c;这次更新让RabbitMQ在物联网领域的竞…...

5分钟上手MouseClick:让重复点击自动化的3个核心技巧

5分钟上手MouseClick&#xff1a;让重复点击自动化的3个核心技巧 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界面美观 &#xff0c;操…...

Lingbot-Depth-Pretrain-ViTL-14 模型压缩与加速:面向边缘设备的部署优化教程

Lingbot-Depth-Pretrain-ViTL-14 模型压缩与加速&#xff1a;面向边缘设备的部署优化教程 想让一个像 Lingbot-Depth-Pretrain-ViTL-14 这样的大模型在树莓派、Jetson 这类小设备上跑起来&#xff0c;是不是感觉像让一头大象挤进小轿车&#xff1f;直接部署&#xff0c;设备可…...

IndexTTS2 V23应用案例:打造智能客服语音,让机器说话更有人情味

IndexTTS2 V23应用案例&#xff1a;打造智能客服语音&#xff0c;让机器说话更有人情味 1. 为什么智能客服需要情感语音&#xff1f; 在当今的客户服务场景中&#xff0c;冰冷的机械语音正在被市场淘汰。研究表明&#xff0c;带有适当情感的语音交互能显著提升用户体验&#…...

Ostrakon-VL扫描终端效果:不同材质价签(纸质/塑料/金属)识别

Ostrakon-VL扫描终端效果&#xff1a;不同材质价签&#xff08;纸质/塑料/金属&#xff09;识别 1. 像素特工&#xff1a;Ostrakon-VL扫描终端介绍 这是一个基于Ostrakon-VL-8B多模态大模型开发的Web交互终端&#xff0c;专门针对零售与餐饮场景优化。与传统工业级UI不同&…...

花小钱办大事!微调Nova Lite,实现Pro级视觉检测效果

本文介绍了在Amazon Bedrock上对Amazon Nova Lite 1.0进行微调的两个实际应用案例&#xff0c;展示了在专业计算机视觉任务中&#xff0c;如何在保持成本效益的同时显著提升性能。通过对航拍视角检测和低光照监控场景的系统性评估&#xff0c;本例以最小的训练成本实现了增强的…...

让大模型乖乖听话:新手程序员必备的Prompt写作秘籍(收藏版)

本文探讨了如何通过精心设计的Prompt让大模型按照要求思考&#xff0c;提升任务执行的准确性。作者提出了一个有效的Prompt结构&#xff0c;包括角色/任务定义、核心原则、上下文处理、CoT(Chain of Thoughts)思考链、输出规范和Few-Shot示例等模块。文章还介绍了如何借助模型生…...

告别复杂配置!Phi-3-Mini-128K一键部署实测:7GB显存跑通,小白也能玩转大模型

告别复杂配置&#xff01;Phi-3-Mini-128K一键部署实测&#xff1a;7GB显存跑通&#xff0c;小白也能玩转大模型 1. 为什么选择Phi-3-Mini-128K 如果你正在寻找一个既强大又轻量的大语言模型&#xff0c;Phi-3-Mini-128K绝对值得考虑。这个由微软开发的模型虽然只有3.8亿参数…...

Qwen3.5-9B开源可部署实践:国产昇腾910B适配方案(CANN+PyTorch NPU移植)

Qwen3.5-9B开源可部署实践&#xff1a;国产昇腾910B适配方案&#xff08;CANNPyTorch NPU移植&#xff09; 1. 项目概述 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型&#xff0c;具备强大的逻辑推理、代码生成和多轮对话能力。该模型特别针对国产昇腾910B处理器进行了优化…...