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

Element UI、Element Plus 里的表单验证的required必填的属性不能动态响应?

 一 问题背景

想要实现:

新增/修改对话框中(同一个),修改时“备注”字段非必填,新增时"备注"字段必填

结果发现直接写不生效-初始化一次性

edit: [{ required: true, message: "请输入备注", trigger: "blur" }],

写成validator虽然生效但是必填时没有*-动态但没required配置项匹配的样式

validator: (rule, value, callback) => {
if (dialogType.value === 'edit' && !value?.trim()) {
callback(new Error('请输入备注'));
} else {
callback();
}
},
trigger: 'blur'
  remark: [{validator: (rule: any, // Element Plus 内部规则对象,通常无需具体类型value: string, // 输入框的值(根据字段名 remark 推断为字符串)callback: (error?: Error) => void // Element Plus 验证回调函数) => {if (dialogType.value === "edit" && !value?.trim()) {callback(new Error("请输入备注"));} else {callback();}},trigger: "blur",},],

 二 解决方法

(一)prop写成判断对应不同rules规则,对号入座

        <el-form-itemlabel="备注":prop="dialogType === 'edit'? 'remark' : ''"><el-input v-model="form.remark" /></el-form-item>
const dialogType = ref<"add" | "edit">("add");
const rules = {remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
}

(二)把rules挪到el-form-item内部

        <el-form-itemlabel="备注"prop="remark":rules="{required: dialogType === 'edit' ? true : false,message: '请输入备注',}"><el-input v-model="form.remark" /></el-form-item>

感觉实现的都挺简洁的,比起监听什么的实现方式

http://www.xdnf.cn/news/83899.html

相关文章:

  • Anaconda、conda和PyCharm在Python开发中各自扮演的角色
  • Docker 中运行 JAR 文件
  • std::vector 自定义分配器
  • 第六章 QT基础:2、编程基础及串口助手案例
  • 一文读懂什么是 MCP、A2A、ANP
  • TypeScript十大关键语法
  • 第44讲:玩转土壤数据!用机器学习挖掘地球皮肤的秘密 [特殊字符][特殊字符]
  • 集成算法学习案例
  • Open GL ES -> 模版测试,绘制SurfaceView中某个目标区域
  • 【目标检测】对YOLO系列发展的简单理解
  • SharpMap与TerraLib:C#与C++开源GIS库
  • Docker Compose常用命令
  • S32K144学习(16)-Bootloader
  • NLP高频面试题(五十)——大模型(LLMs)分词(Tokenizer)详解
  • uniapp-商城-33-shop 布局搜索页面以及u-search
  • QTextDocument 入门
  • 多路转接poll服务器
  • MySQL 启动报错:InnoDB 表空间丢失问题及解决方法
  • 基于STM32的室内环境监测系统
  • .NET下 using 块的作用
  • 正则表达式
  • 【AAudio】A2dp sink创建音频轨道的源码流程分析
  • 【OSG源码阅读】Day 1: 从Viewer的run函数开始
  • Sentinel数据S2_SR_HARMONIZED连续云掩膜+中位数合成
  • Spark-SQL(总结)
  • Saliency Driven Perceptual Image Compression阅读
  • 如何解决消费者高频触发订单更新?
  • ProxySQL 的性能优化需结合实时监控数据与动态配置调整
  • pip install torchsummary报错
  • 5个Go接口常见错误及避免方法