位置: 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)(井冈山游击队的口号)

  • oppok9s怎么隐藏软件(oppok9s怎么隐藏应用)

    oppok9s怎么隐藏软件(oppok9s怎么隐藏应用)

  • 苹果微信怎么设置微信钱包锁(苹果微信怎么设置置顶)

    苹果微信怎么设置微信钱包锁(苹果微信怎么设置置顶)

  • 美团显示登录状态异常(美团显示登录状态错误)

    美团显示登录状态异常(美团显示登录状态错误)

  • vivo x27微信账单怎么删除(vivox27微信账单怎么关闭人脸识别)

    vivo x27微信账单怎么删除(vivox27微信账单怎么关闭人脸识别)

  • iphone11主号副号怎么切换(苹果11主号副号)

    iphone11主号副号怎么切换(苹果11主号副号)

  • 飞机apu是什么东西(apu飞机上什么意思)

    飞机apu是什么东西(apu飞机上什么意思)

  • ios软件beta已过期(ios 软件beta版本过期)

    ios软件beta已过期(ios 软件beta版本过期)

  • 钉钉共享屏幕还能开摄像头么(钉钉共享屏幕还能看到人吗)

    钉钉共享屏幕还能开摄像头么(钉钉共享屏幕还能看到人吗)

  • 快手私信为什么删除不了(快手私信为什么有时候收不到信息)

    快手私信为什么删除不了(快手私信为什么有时候收不到信息)

  • 龙芯3a4000相当于i几(龙芯3a4000相当i57200)

    龙芯3a4000相当于i几(龙芯3a4000相当i57200)

  • 复印扫描是什么意思(复印扫描有用吗)

    复印扫描是什么意思(复印扫描有用吗)

  • 页面边距怎么设置厘米(页面边距怎么设置磅)

    页面边距怎么设置厘米(页面边距怎么设置磅)

  • 三核是什么(什么是三核产品)

    三核是什么(什么是三核产品)

  • 电脑系统更新后原来的东西还有吗(电脑系统更新后无法连接网络)

    电脑系统更新后原来的东西还有吗(电脑系统更新后无法连接网络)

  • 1060显卡3g显存够用吗(1060显卡显存3g与6g区别)

    1060显卡3g显存够用吗(1060显卡显存3g与6g区别)

  • word和pdf查重有区别吗(word和pdf查重哪个重复率高)

    word和pdf查重有区别吗(word和pdf查重哪个重复率高)

  • 手机没下载东西为什么内存越来越少(手机没有下载软件怎么办)

    手机没下载东西为什么内存越来越少(手机没有下载软件怎么办)

  • 快手亲密值怎么算(快手亲密值怎么上得快)

    快手亲密值怎么算(快手亲密值怎么上得快)

  • 华为mate30防水怎么样(华为手机mate30防水)

    华为mate30防水怎么样(华为手机mate30防水)

  • 手机怎样下载歌曲到内存卡(手机怎样下载歌曲到u盘操作视频)

    手机怎样下载歌曲到内存卡(手机怎样下载歌曲到u盘操作视频)

  • 怎么设置热点人数(怎么设置热点人数华为)

    怎么设置热点人数(怎么设置热点人数华为)

  • 苹果x后面两个摄像头有什么用(苹果x后面两个摄像头中间白色圈有什么用)

    苹果x后面两个摄像头有什么用(苹果x后面两个摄像头中间白色圈有什么用)

  • oppoa5的呼吸灯怎么设置(oppoa59s呼吸灯)

    oppoa5的呼吸灯怎么设置(oppoa59s呼吸灯)

  • 别人的抖音id怎么去掉(别人的抖音id怎么查)

    别人的抖音id怎么去掉(别人的抖音id怎么查)

  • 维多利亚瀑布上的彩虹,赞比亚 (© Dietmar Temps/Shutterstock)(维多利亚瀑布有多高?多宽?)

    维多利亚瀑布上的彩虹,赞比亚 (© Dietmar Temps/Shutterstock)(维多利亚瀑布有多高?多宽?)

  • python TKinter普通菜单的介绍(python2 tkinter)

    python TKinter普通菜单的介绍(python2 tkinter)

  • python with遇到错误语句的处理(python报错怎么办)

    python with遇到错误语句的处理(python报错怎么办)

  • 哪些企业可以出2.2证书
  • 企业所得税税负率多少合适
  • 计提生产车间工人和车间管理人员工资
  • 工程管理服务属于哪个国标行业
  • 预算资产负债表
  • 季中转一般纳税人申报步骤
  • 员工意外险费用
  • 受托开发软件产品免征增值税
  • 发票没有认证怎么报销
  • 退还增值税留抵税额是什么政策
  • 上月未计提税金,下月怎么做分录
  • 非税收入一般缴款书可以抵扣吗
  • 国有控股企业股权转让
  • 银行取现怎么取
  • 哪些项目需要征税
  • 监控设备的维修保养
  • 长期待摊费用当月减少当月摊销吗
  • 对外工程承包企业
  • 企业的应付账款确实无法支付,经确认后转作
  • 生产企业土地使用权摊销
  • 汇兑差额会计处理
  • 留用员工培训费怎么入账
  • 厂房装修费用计入制造费用吗
  • 公司购买的办公桌椅属于固定资产吗
  • 增值税申报表附表二填表说明
  • 金蝶旗舰版反过账的操作步骤
  • 管理费是否需合计
  • 公司购买的原材料,原价格销售合理吗
  • i7 5960X评测跑分参数介绍
  • 应如何做会计分录表
  • 多结转成本会导致什么
  • php数组函数输出《咏雪》里有多少"片"字
  • 帮忙介绍业务
  • 罂粟是不是草果
  • 说一下键盘
  • vue怎么使用本地存储比较好
  • 公积金扣款日余额不足,影响征信
  • 应付票据抵付应付账款
  • 为什么微信转账不成功
  • 城镇土地使用税纳税义务发生时间
  • vue get方法
  • 静电现象什么意思
  • 货物运输业的增值税税率
  • 溢缴退费是什么意思
  • 应交税费已交税金是什么意思
  • uniapp封装组件,多了一层
  • node深入浅出pdf
  • 上月未记账,本月不能记账
  • 自收自支是由主管部门拨款吗
  • 收到红字发票如何入账
  • 水电费的收据单怎么写
  • 置换的房产如何操作
  • 承兑汇票贴现计算器下载
  • 外埠存款主要使用范围
  • 向银行借的款属于什么会计要素
  • 免费给人一些客户资料违法吗
  • 人工费的发票税率怎么算
  • 一般纳税人会计分录
  • 新准则房地产企业收入确认时间
  • 数据库性能优化方法论和最佳实践
  • win7清理系统垃圾的方法
  • windows xp sp4 下载 windows xp sp4补丁包(非官方)
  • 如何进行节约
  • windows server 2003与2008的区别联系与选择指南
  • windows xp退役
  • win7 手动输入用户名
  • mac开机慢开机以后特别卡
  • win10更新后电脑黑屏
  • 笔记本win8为什么不能连无线
  • win8系统咋样
  • win7右下角的网络连接不显示
  • win8使用教程和技能
  • unity跨脚本调用函数
  • jquery自定义组件
  • unity3d shader之God Ray上帝之光
  • macbookair安卓系统怎么切换到苹果
  • jqueryw3c
  • 掌上海关怎么查询
  • 矿产资源税怎样征收
  • 宾馆如何申请税务发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设