位置: IT常识 - 正文

vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

编辑:rootadmin
vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

推荐整理分享vue2:elementUI中Form 表单在特定情况下做动态rules添加删除,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

先看需求:(不想看的直接拉到最后)

 【需求说明】

6、如状态为上架时,库存为必填,下架状态时,库存为可填,前面无星号

实现方法:使用this.$set()和this.$delete()

上代码:

vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

由于设计商业隐私,代码只上传一部分:  

<el-form :model="commodityForm" ref="commodityForm" :rules="rules" label-width="120px"> 其他字段...... <el-form-item label="上下架状态" prop="status"> <el-switch v-model="commodityForm.status" :active-value="1" :inactive-value="0" @change="switchChange" > </el-switch> </el-form-item> </el-form>

表单data中原来的rules:

// 表单校验 rules:{ name: [{ required: true, message: "请输入商品名称", trigger: ['blur','change']}], title: [{ required: true, message: "请输入商品标题", trigger: ['blur','change']}], commodityFormImg:[{ required: true, message: '请上传商品图片', trigger: 'change'}], typeId: [{ required: true, message: '请选择所属分类', trigger: 'change'}], brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change'}], specification: [{ required: true, message: '请选择商品规格', trigger: ['blur','change']}], sellingPrice: [{ required: true, message: '请输入销售价', trigger: ['blur','change']}], // stock: [{ required: true, message: '请输入库存', trigger: ['blur','change']}], detail: [ { required: true, message: "商品详情不能为空", trigger: "blur" }, { validator: validateEditor, trigger: 'blur,change' } ] },

不添加上下架状态的rules

在change事件中进行判断:重点方法在这里!!!!!!!!!!

// 上下架开关事件 switchChange(e) { if(e != 1) { //删除校验的关键的两行代码(两行都要!!!!!!!!!!!!!!!) // 这个只能删除文字提示,但是星号还在, this.$refs["commodityForm"].clearValidate(["stock"]); // 这个只能删除星号提示,但是文字还在 this.$delete(this.rules,'stock'); }else{ //添加校验代码(!!!!!!!!!!!!!!!) this.$set(this.rules,'stock',[{ required: true, message: '请输入库存', trigger: ['blur','change']}]) } }

动态添加删除rules

2023-1-29二更一个最新的方法:

<el-form-item label="库存" prop="stock" :rules="commodityForm.status == 1 ? { required: true, message: '请输入库存', trigger: ['blur','change']} : {}"> <el-input v-model.trim="commodityForm.stock" @input="commodityForm.stock = commodityForm.stock.replace(/[^\d]/g, '')" size="small" placeholder="请输入库存"></el-input> </el-form-item>

感谢我的好同事教我做事哈哈哈

 :rules="commodityForm.status == 1 ? { required: true, message: '请输入库存', trigger: ['blur','change']} : {}"

同时方法中的代码留一个:

switchChange(e) { if(e != 1) { this.$refs["commodityForm"].clearValidate(["stock"]); } }
本文链接地址:https://www.jiuchutong.com/zhishi/293144.html 转载请保留说明!

上一篇:圣埃尔姆附近的潘塔留岛鸟瞰图,西班牙马略卡岛 (© Dimitri Weber/Azing航空公司)(圣米厄尔教堂)

下一篇:浦那的黄胸织布鸟鸟巢,马哈拉施特拉邦 (© Samyak Kaninde/Alamy Stock Photo)(井冈山游击队的口号)

  • 诺基亚像素最高的手机(诺基亚x700)(诺基亚像素多少)

    诺基亚像素最高的手机(诺基亚x700)(诺基亚像素多少)

  • wps如何启用宏功能(wps如何启用宏功能 未安装vba)

    wps如何启用宏功能(wps如何启用宏功能 未安装vba)

  • 小米手机如何小窗聊天(小米手机如何小屏幕显示)

    小米手机如何小窗聊天(小米手机如何小屏幕显示)

  • 支付宝加入黑名单还能转账吗(支付宝加入黑名单)

    支付宝加入黑名单还能转账吗(支付宝加入黑名单)

  • iphone7尾插坏了症状(苹果7p尾插坏了怎么办)

    iphone7尾插坏了症状(苹果7p尾插坏了怎么办)

  • qq音乐qplay图标不见了(QQ音乐Qplay图标不见怎么办)

    qq音乐qplay图标不见了(QQ音乐Qplay图标不见怎么办)

  • bios找不到power菜单(win7bios找不到power菜单)

    bios找不到power菜单(win7bios找不到power菜单)

  • 金山毒霸怎么卸载不了(金山毒霸怎么卸载不掉win7)

    金山毒霸怎么卸载不了(金山毒霸怎么卸载不掉win7)

  • 微信自动加群的软件

    微信自动加群的软件

  • 微信视频号会被好友看到吗(微信视频号会被屏蔽的好友看到吗)

    微信视频号会被好友看到吗(微信视频号会被屏蔽的好友看到吗)

  • 淘宝主图视频怎么上传不了(淘宝主图视频怎么下载)

    淘宝主图视频怎么上传不了(淘宝主图视频怎么下载)

  • 电脑bois什么意思(bios电脑什么意思)

    电脑bois什么意思(bios电脑什么意思)

  • 看回放老师知道吗(网课看回放老师知不知道)

    看回放老师知道吗(网课看回放老师知不知道)

  • 键盘上没有fn键用什么可以代替(键盘上没有fn键怎么进行背景灯关闭)

    键盘上没有fn键用什么可以代替(键盘上没有fn键怎么进行背景灯关闭)

  • 在手机上下载什么软件可以开空调(在手机上下载什么软件能赚钱)

    在手机上下载什么软件可以开空调(在手机上下载什么软件能赚钱)

  • iphone11pro max双卡怎么插(iPhone11pro max双卡吗)

    iphone11pro max双卡怎么插(iPhone11pro max双卡吗)

  • 支付宝集五福只能集一个吗(支付宝集五福只能合成一次吗)

    支付宝集五福只能集一个吗(支付宝集五福只能合成一次吗)

  • 小米8可以用5a充电器吗(小米8可以用5a充电吗)

    小米8可以用5a充电器吗(小米8可以用5a充电吗)

  • 微信语音通话能回放吗(微信语音通话能录音吗怎么设置)

    微信语音通话能回放吗(微信语音通话能录音吗怎么设置)

  • oppor15怎么退出耳机模式(oppor15怎么退出coloros恢复模式)

    oppor15怎么退出耳机模式(oppor15怎么退出coloros恢复模式)

  • ie浏览器的文件窗口在哪(ie浏览器的文件名)

    ie浏览器的文件窗口在哪(ie浏览器的文件名)

  • 苹果11pro屏幕刷新率是多少(苹果11pro刷屏率是多少?)

    苹果11pro屏幕刷新率是多少(苹果11pro刷屏率是多少?)

  • 微信扫码黑屏怎么回事(微信扫码黑屏怎么办解决)

    微信扫码黑屏怎么回事(微信扫码黑屏怎么办解决)

  • 苹果下载app要验证怎么办(苹果下载app要验证)

    苹果下载app要验证怎么办(苹果下载app要验证)

  • icloud停用和删除后果(icloud停用和删除是什么意思)

    icloud停用和删除后果(icloud停用和删除是什么意思)

  • 腾讯视频怎么2倍播放(腾讯视频怎么2个人一起登录)

    腾讯视频怎么2倍播放(腾讯视频怎么2个人一起登录)

  • 通常三个字符的口令破解需要多少时间(通常三个字符的长度为)

    通常三个字符的口令破解需要多少时间(通常三个字符的长度为)

  • 应用宝禁止安装怎么设置(应用宝禁止安装如何解除)

    应用宝禁止安装怎么设置(应用宝禁止安装如何解除)

  • 小米6gps在哪打开(小米6dpi)

    小米6gps在哪打开(小米6dpi)

  • 所得税汇算清缴时间期限
  • 递延所得税什么时候确认
  • 差旅费抵扣进项税政策201939号文件
  • 贴现怎么计算公式
  • 公司缴纳养老保险不在个人账户里吗
  • 小规模免税收入账务处理
  • 普票加专票超过30万全交税吗2020
  • 主营业务成本可以暂估吗
  • 外币账户怎么操作
  • 免税农产品如何填报企业所得税季报
  • 置换回房产怎么过户
  • 境内机构经常项目外汇账户
  • 专票信息内容
  • 企业如何做好税务管理工作
  • 存款保险能取出来钱吗
  • 哪些津贴免征个税
  • 投资合伙企业对公司有债务责任吗
  • 在建工程会计账务处理是否有利润表
  • 怎么认定是否为党员
  • 腾讯手游助手闪屏怎么办
  • 月末结转营业税金及附加分录
  • 技术转让费会计处理
  • vue兼容性
  • 最好卖的游戏机排行榜
  • 小规模企业现金怎样管理
  • 资产负债表的编制方法
  • 购买电脑固定资产怎么记账
  • css案例教程
  • 金蝶利息收入结转怎么弄
  • 劳保用品会计科目进什么科目
  • 广东省工科赛智能配送
  • web主要的请求方式有几种
  • c#怎么使用
  • 面试宝典下载
  • 百旺开票软件状态查询在哪里
  • 优先股可转让吗
  • mysql底层是什么
  • 为SQLite3提供一个ANSI到UTF8的互转函数
  • 关于录制初三毕业班家长寄语通知
  • 固定资产怎么确认价值
  • 税额和税款是一回事吗
  • 固定资产的弃置费用
  • 付款后发票的扩张怎么开
  • 环保税计税依据怎么算
  • 分配人工费的会计分录
  • 为什么说运输是实现物流合理化的关键
  • 会计账簿登记错误
  • 人力资源公司劳务外包
  • 建筑施工企业在12个月内第三次发生生产安全事故的
  • 非限定性净资产是什么意思
  • 发票打印机格式不对
  • jdbc取数据
  • c#如何使用数据库
  • 445端口 关闭
  • windows自带软件有哪些
  • windows xp操作
  • win7系统开机后黑屏只有鼠标指针可以移动
  • win10鼠标指针在文本区很小
  • xp系统进程
  • 乾坤大挪移秘籍图片
  • win7系统的word文档中的工具在哪里
  • window10升级不了
  • win7 64位旗舰版电脑如何提高鼠标的精准度?提高鼠标的精准度的方法
  • linux内核文件夹
  • opengles和vulkan哪个好
  • 用jquery实现隔行变色
  • html初学
  • jQuery Password Validation密码验证
  • 超级硬盘数据恢复软件v2.7
  • w10cmd命令高级命令
  • nodejs cgi
  • js获取div下指定元素的值
  • jquery easyui 教程
  • js为什么不能用var定义变量
  • androidstudio offline
  • 卷烟批发环节的消费税
  • 税务局绩效工作总结
  • 印花税核算有两种情况,是如何处理的?
  • 两利四率完成情况
  • 2021年小规模纳税人优惠政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设