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

  • win10电脑如何看电脑配置(win10电脑如何看wifi密码是多少)

    win10电脑如何看电脑配置(win10电脑如何看wifi密码是多少)

  • 荣耀x10摄像头如何升起来(华为荣耀x10手机摄像头)

    荣耀x10摄像头如何升起来(华为荣耀x10手机摄像头)

  • 小米9用贴膜吗(小米9买回来是有贴膜的吗?)

    小米9用贴膜吗(小米9买回来是有贴膜的吗?)

  • qq自动保存图片怎么关闭(qq自动保存图片在电脑怎么办)

    qq自动保存图片怎么关闭(qq自动保存图片在电脑怎么办)

  • 为什么airpods左右电量不一样(为什么airpods左耳一直显示充电)

    为什么airpods左右电量不一样(为什么airpods左耳一直显示充电)

  • ipad个人热点怎么开(iPad个人热点怎么连接)

    ipad个人热点怎么开(iPad个人热点怎么连接)

  • 微信支付本次访问未经授权是什么意思(微信支付本次交易存在欺诈风险怎回事)

    微信支付本次访问未经授权是什么意思(微信支付本次交易存在欺诈风险怎回事)

  • 什么叫仅还原系统设置项(仅还原系统设置项会怎么样)

    什么叫仅还原系统设置项(仅还原系统设置项会怎么样)

  • oppoa92s处理器是什么(OPPOa92s处理器是多少)

    oppoa92s处理器是什么(OPPOa92s处理器是多少)

  • 后台app刷新有什么用

    后台app刷新有什么用

  • pw是什么(pw是什么水)

    pw是什么(pw是什么水)

  • 笔记本fps不稳定是什么原因(笔记本电脑fps不稳定)

    笔记本fps不稳定是什么原因(笔记本电脑fps不稳定)

  • 32是十进制整数吗(32的10进制是多少)

    32是十进制整数吗(32的10进制是多少)

  • 红米note8pro能息屏显示吗(红米note8pro休眠怎么设置)

    红米note8pro能息屏显示吗(红米note8pro休眠怎么设置)

  • ps文件太大怎么变小(ps文件太大怎么导出为pdf)

    ps文件太大怎么变小(ps文件太大怎么导出为pdf)

  • 苹果6怎么进入nfc功能(苹果6怎么进入dfu模式刷机)

    苹果6怎么进入nfc功能(苹果6怎么进入dfu模式刷机)

  • oppok1怎么强行关机(oppo强制关机怎么关闭)

    oppok1怎么强行关机(oppo强制关机怎么关闭)

  • 苹果xs后壳是什么材质(苹果xs手机后壳多少钱)

    苹果xs后壳是什么材质(苹果xs手机后壳多少钱)

  • 荣耀v20有没有耳机接口(荣耀v20pro有没有耳机孔)

    荣耀v20有没有耳机接口(荣耀v20pro有没有耳机孔)

  • 高德地图上怎么上店名(高德地图上怎么看方向)

    高德地图上怎么上店名(高德地图上怎么看方向)

  • Win8如何连接到无线网络?(win8系统怎么连接无线)

    Win8如何连接到无线网络?(win8系统怎么连接无线)

  • Linux下进程管理工具Supervisor的安装配置和基本使用(linux进程管理器)

    Linux下进程管理工具Supervisor的安装配置和基本使用(linux进程管理器)

  • win11最低硬件要求是什么?电脑不满足win11最低硬件要求可以继续使用Win10吗(win11最低硬件要求几代)

    win11最低硬件要求是什么?电脑不满足win11最低硬件要求可以继续使用Win10吗(win11最低硬件要求几代)

  • qcwlicon.exe - qcwlicon是什么进程 有何作用

    qcwlicon.exe - qcwlicon是什么进程 有何作用

  • Typescript 全栈最值得学习的技术栈 TRPC(typescript完全解读)

    Typescript 全栈最值得学习的技术栈 TRPC(typescript完全解读)

  • 房地产耕地占用税实施细则
  • 资产处置损益和固定资产清理的区别
  • 个体工商户可以开建筑劳务发票吗?
  • 鉴证服务的税率有哪些
  • 会计中计提是什么意思
  • 未发货先开票怎么办
  • 一次性计提后的固定资产残值
  • 工会经费计入现金流量表哪项
  • 顺风车公司可以开发票吗
  • 小规模企业多交增值税
  • 企业所得税税率有几个档次
  • 办公室零食采购台账
  • 快递公司结算员工作量大不大
  • 总公司亏损分公司盈利如何处理
  • 出口退税当期不得免征和抵扣的税额
  • 商用住房出租需要交什么税?
  • 预交增值税怎么入账
  • 购货发票未到
  • 电器供应
  • 对方用房子抵债会计怎么记账
  • 认证费用计入什么账户
  • 个税申报初始密码一定要去所属税局看吗
  • 递延收益在现金流量表体现吗
  • 三个点的专票要交多少税
  • 出口汇兑损益的会计分录
  • 从租计征的房产税纳税义务发生时间
  • 财产清查的方法和财产清查结果的会计处理
  • 2021最新版静疗规范指南
  • 电脑管家怎么检测
  • linux中的util值很高
  • 预付款未收到发票如何做账
  • cpu主频在哪看
  • 进项发票没认证可以开红字申请单吗
  • PHP:preg_match()的用法_PCRE正则函数
  • 作为一名程序员应该掌握哪些语言
  • 公司员工意外险,死亡能赔多少钱
  • moments的用法
  • 巴尼奥斯附近的阿格杨瀑布
  • 预算超支怎么办
  • 小规模纳税人的企业所得税怎么算
  • torch.nn.functional.interpolate()函数详解
  • php socket编程
  • 固定资产清理的借贷方向表示什么
  • 固定资产租赁费属于什么费用
  • 年终企业所得税怎么结转
  • 店面收回转让费怎么办
  • 如何做一份有效的面包
  • 负债项目的排列顺序
  • 银行承兑汇票进行贴现的会计分录
  • 公司筹建期间预算怎么写
  • 公允价值的通俗理解
  • 生产成本结转到本年利润吗
  • 老项目简易征收税率
  • 存货跌价准备可以转回吗,分录怎么写
  • fedora29
  • 外接法实物图
  • 如何用u盘装系统盘
  • 如何创作图文并茂的图片
  • 晨枫U盘启动工具哪个版本好用
  • xp系统怎么设置自动重启
  • mac 怎么复制文件
  • windows7禁用wifi怎么办
  • win8如何更新驱动
  • windows启动很慢很慢
  • win7本地连接ipv4属性闪退
  • jquery异常捕获
  • jquery插件库怎么导入
  • 利用python进行
  • shell忽略大小写
  • pythonipo模型
  • 如何用u盘重装电脑系统
  • python 字典的字典
  • android studio常用控件
  • 湖南省国家税务总局官网登录入口
  • 飞机票其他税费包括什么内容
  • 安徽省国家税务局网
  • 预缴增值税是否要预缴城建税及附加
  • 广东省税务局发票查询
  • 玉石手镯零售环保要求
  • 北京税务代办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设