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

  • 小米手环6怎么设置密码(小米手环6怎么调时间)

    小米手环6怎么设置密码(小米手环6怎么调时间)

  • 华为视频编辑打不开(华为手机视频编辑功能怎么用)

    华为视频编辑打不开(华为手机视频编辑功能怎么用)

  • 软碟通u盘必须fat32格式吗(软碟通制作u盘启动盘之后能装其它文件吗)

    软碟通u盘必须fat32格式吗(软碟通制作u盘启动盘之后能装其它文件吗)

  • airpods pro如何充电(airpodspro充电怎么充)

    airpods pro如何充电(airpodspro充电怎么充)

  • 上传照片失败什么原因(上传照片失败怎么办)

    上传照片失败什么原因(上传照片失败怎么办)

  • 淘宝刚买完东西就下架了是怎么回事(淘宝刚买完东西怎么退款)

    淘宝刚买完东西就下架了是怎么回事(淘宝刚买完东西怎么退款)

  • 为什么抖音加了慢动作后面没声音了(为什么抖音加了特效发布就没了)

    为什么抖音加了慢动作后面没声音了(为什么抖音加了特效发布就没了)

  • 苹果手表开不了机(苹果手表开不了机怎么办)

    苹果手表开不了机(苹果手表开不了机怎么办)

  • 14英寸电脑长宽多少(14英寸笔记本电脑长宽多少厘米)

    14英寸电脑长宽多少(14英寸笔记本电脑长宽多少厘米)

  • 微信怎么充qq钱包(怎样用微信充qq钱包)

    微信怎么充qq钱包(怎样用微信充qq钱包)

  • 华为p40有防水功能吗(华为p40 防水么)

    华为p40有防水功能吗(华为p40 防水么)

  • 人工智能的研究内容有哪些(人工智能的研究途径与方法有哪些?)

    人工智能的研究内容有哪些(人工智能的研究途径与方法有哪些?)

  • 路由表中包含哪些核心信息(路由表中包含哪几项)

    路由表中包含哪些核心信息(路由表中包含哪几项)

  • 华为mate20怎么解锁(华为mate20怎么解除关联华为帐号)

    华为mate20怎么解锁(华为mate20怎么解除关联华为帐号)

  • 爱奇艺用微信登录的可以两个人用吗(爱奇艺用微信登录不了)

    爱奇艺用微信登录的可以两个人用吗(爱奇艺用微信登录不了)

  • bkl一al00是什么型号(bkl-al00是什么型号)

    bkl一al00是什么型号(bkl-al00是什么型号)

  • 抖音怎么用抖音号登录(抖音怎么用抖音零钱支付)

    抖音怎么用抖音号登录(抖音怎么用抖音零钱支付)

  • iphone11支持双卡么(iphone11 支持双卡)

    iphone11支持双卡么(iphone11 支持双卡)

  • 华为pct一al10是什么型号(华为pct一al10多少钱)

    华为pct一al10是什么型号(华为pct一al10多少钱)

  • 华为nova系列是什么定位(华为nova系列是中端还是高端?)

    华为nova系列是什么定位(华为nova系列是中端还是高端?)

  • 【Java编程指南】方法(java编程入门基础教程)

    【Java编程指南】方法(java编程入门基础教程)

  • 这个Python读取文件的方法,堪称天花板级别...(python2.7读取文件)

    这个Python读取文件的方法,堪称天花板级别...(python2.7读取文件)

  • discuz 如何关闭发帖和回复功能(关闭论坛)

    discuz 如何关闭发帖和回复功能(关闭论坛)

  • 去年少交增值税的会计处理
  • 工资储备金制度
  • 简易计税方法使用范围
  • 城建税 小规模
  • 增值税票购买份数满了怎么办
  • 合并扣税项是什么科目
  • 企业注销的时候未分配利润怎么处理
  • 建筑装饰行业会计分录
  • 公司外部人员可以直接在公司报销吗
  • 资产的税务处理要注意什么
  • 残疾人收到房租租赁发票收入还要缴纳个税吗
  • 没有取得发票可以抵扣成本吗
  • 小规模纳税人没有成本票怎么做账
  • 金税盘非征期汇总资料未报送
  • 租赁架子公司购车合法吗
  • 事业单位财政拨款是编制吗
  • Windows XP具有类似于Apple Aqua的秘密主题
  • 餐费发票可以抵扣成本吗
  • 文件夹删除需要管理员权限怎么弄
  • php string函数
  • 企业预付工程款的会计分录怎么做
  • 单反镜头直径越大是不是就越好
  • 直线法计提折旧每年都一样吗
  • 分公司注销,总公司账务处理
  • 房屋租赁发票怎么入账
  • 无极框架下载
  • axios请求设置超时时间
  • ajaxuploadfile
  • 开发成本属于什么类型科目
  • php die exit
  • 应收账款期末余额在借方还是贷方
  • 小规模附加税减免政策2023
  • 债权债务转让会计分录
  • 收购公司款项的会计处理
  • 生产型出口企业的概念
  • 长期待摊费用如何做分录
  • 货币基金分红交多少税
  • 未开票收入是怎么算的
  • sqlserver数据库性能情况
  • 申报错误后处理有影响吗
  • 国家税务总局金税四期
  • 实际已缴纳所得税额怎么填
  • 关税 账务处理
  • 文化传媒公司的主营业务
  • 企业收到普通发票需要报税嘛
  • 以原材料投入资本
  • 视同销售但未收到钱怎么做账?
  • 固定资产一次性扣除账务处理
  • 公司代个人缴纳社保
  • 货款尚未收到属于什么会计科目
  • 厂家给的促销费可以退吗
  • 年终奖和工资一起发吗
  • mysql 绿色
  • centos6.10安装教程
  • 任务栏都不见了
  • mac的废纸篓
  • linux系统检测工具
  • bios的含义
  • netcfg -d
  • Win10预览版怎么变回正式版
  • macos 怎么用
  • Linux dpkg-query 命令用法详解(Debian Linux中软件包的查询工具)
  • 怎么判断进程是否存在
  • 强制升级win11后果
  • windows7手动更新
  • 自定义ui界面
  • unity优化方案
  • unity 手册
  • 安卓飞行手游
  • cocos2d rpg
  • 文件上传的三个条件
  • 批处理重启后继续运行
  • jquery教程chm
  • 用jquery
  • 安卓udp抓包
  • 怎么用python下载付费音乐
  • js中的flat
  • javascript怎么学
  • Android调用系统截屏方法
  • 季度申报成功与否怎么查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设