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

  • 职工薪酬纳税调减的情况
  • 免抵税额计入什么科目
  • 融资租赁业务如何开具增值税
  • 什么是资本利得?
  • 航天金税财务软件使用说明
  • 公司只有一个人可以不交社保吗
  • 外单位人员报销差旅费会计分录
  • 房地产企业融资存在的问题
  • 预收货款存入银行分录
  • 转让土地及地上建筑物
  • 可供分配利润包含哪些
  • 增值税普通发票税率
  • 进项和销项不符的税务处理
  • 代数分配法适用于什么
  • 保险付款后几天给发票保单
  • 小企业销售费用包括
  • 偶然所得怎么缴纳个人所得税免税
  • 改变资金用途的说明
  • 生产企业原材料的订购与运输建模
  • 营业款怎么存入公司账户
  • win11怎么打开磁盘管理
  • 主板BIOS无法更改显存
  • 应付票据开出票据的会计分录
  • 分手我不怕
  • 矿产资源补偿费是什么
  • 购买电子承兑需要给对方开发票吗
  • PHP:jdtojewish()的用法_日历函数
  • 北极熊睡觉图片卡通
  • 用tomcat部署web项目
  • 门诊部需要药品经营许可证吗
  • 日出时的麦克拱岩,俄勒冈南海岸 (© Dennis Frates/Alamy)
  • array php
  • auto系列软件
  • stacking 集成
  • spring ioc di aop
  • 什么是微前端
  • 使用什么指令可以清空memcached数据库中的所有数据
  • mongodb用法
  • 增值税增量留抵退税政策2019
  • MySQL Proxy的安装及基本命令使用教程
  • python smote算法
  • 账簿启用交接表图片
  • 普通的增值税
  • 企业所得税季初和季末怎么算
  • 小微企业需要专职安全员吗
  • 餐饮个体户如何申请开票
  • 并发环境下,共享资源的正确使用方式是
  • 纳税人销售货物
  • 其他应付什么意思
  • 房屋装修费计入长期待摊费用
  • 一年发一次工资好不好
  • 银行回单nxt
  • 支付给其他公司的借款属于什么现金流
  • 应收账款周转率计算公式
  • 其他业务收入如何填写增值税申报表
  • 取得房租发票的租赁费可以抵税吗
  • 期间费用包括哪三种
  • 电焊工劳保用品有哪些
  • mysql 源码 下载
  • SQL中distinct 和 row_number() over() 的区别及用法
  • winxp搜索文件内容搜不出来
  • tvt_reg_monitor_svc.exe进程是什么
  • win8.1技巧
  • xp远程连接win7
  • win8系统怎么关闭屏保
  • win7的语言栏不见了
  • 如何修改win7电脑用户密码
  • python标准库os中的方法
  • java scripts
  • github常用操作
  • 台湾 游戏论坛
  • javascript边框
  • unity3d效果图
  • js鼠标点击图片就消失
  • 利用python进行
  • jquery each return
  • 兖州宁德新能源官网首页
  • 关于加强税务稽查工作的思考
  • 买了发票但是税控机里显示没有发票怎么办?
  • 税务稽查团队
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设