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

  • 喜马拉雅一个账号可以同时登录几个设备(喜马拉雅一个账号可以多人使用吗)

    喜马拉雅一个账号可以同时登录几个设备(喜马拉雅一个账号可以多人使用吗)

  • 荣耀30pro有电子书模式的吗(荣耀30pro有电子秤功能吗)

    荣耀30pro有电子书模式的吗(荣耀30pro有电子秤功能吗)

  • 魅族17和17pro有什么区别(魅族17和17pro怎么选)

    魅族17和17pro有什么区别(魅族17和17pro怎么选)

  • 爱奇艺分享会员账号怎么弄(爱奇艺分享会员怎么弄)

    爱奇艺分享会员账号怎么弄(爱奇艺分享会员怎么弄)

  • oppor15深色模式在哪(oppor15怎么开深色模式)

    oppor15深色模式在哪(oppor15怎么开深色模式)

  • 京东组队怎么退出(京东618组队可以退出吗)

    京东组队怎么退出(京东618组队可以退出吗)

  • 为什么ps保存不了pdf(为什么ps保存不了显示程序错误)

    为什么ps保存不了pdf(为什么ps保存不了显示程序错误)

  • wptx64能卸载吗

    wptx64能卸载吗

  • 苹果11pro像素多少(苹果11pro手机像素是多少)

    苹果11pro像素多少(苹果11pro手机像素是多少)

  • 为什么苹果11连wifi那么卡(为什么苹果11连wifi用不了)

    为什么苹果11连wifi那么卡(为什么苹果11连wifi用不了)

  • 微信提醒怎么取消(微信提醒怎么取消安卓)

    微信提醒怎么取消(微信提醒怎么取消安卓)

  • 压缩zipped文件夹是什么意思(压缩zipped文件夹无效)

    压缩zipped文件夹是什么意思(压缩zipped文件夹无效)

  • 怎样看淘宝几年总消费(怎样看淘宝几年了)

    怎样看淘宝几年总消费(怎样看淘宝几年了)

  • vivo手机换卡怎么换(vivo手机换卡怎么换视频)

    vivo手机换卡怎么换(vivo手机换卡怎么换视频)

  • 朋友圈仅聊天什么意思(朋友圈仅聊天的意思)

    朋友圈仅聊天什么意思(朋友圈仅聊天的意思)

  • c语言函数可以嵌套调用吗(c语言函数可以没有参数吗)

    c语言函数可以嵌套调用吗(c语言函数可以没有参数吗)

  • 魅族16sPro怎么批量删除联系人(魅族16t如何)

    魅族16sPro怎么批量删除联系人(魅族16t如何)

  • 抖音视频收藏怎么删除(抖音视频收藏怎样转入相册)

    抖音视频收藏怎么删除(抖音视频收藏怎样转入相册)

  • 手机客户端在手机哪里(手机客户端在手机哪里找)

    手机客户端在手机哪里(手机客户端在手机哪里找)

  • 抖音怎么找同款特效(抖音怎么找同款衣服)

    抖音怎么找同款特效(抖音怎么找同款衣服)

  • 隐身访问空间会增加浏览量吗(隐身访问空间会有说说浏览记录吗)

    隐身访问空间会增加浏览量吗(隐身访问空间会有说说浏览记录吗)

  • 怎样重新设置qq相恋日(怎样重新设置苹果手机id与密码)

    怎样重新设置qq相恋日(怎样重新设置苹果手机id与密码)

  • 港澳版苹果xr是双卡双待吗(港版iphone xr)

    港澳版苹果xr是双卡双待吗(港版iphone xr)

  • 华为p30pro有无线充电功能吗(华为p30pro有无线充电功能打不开怎么办)

    华为p30pro有无线充电功能吗(华为p30pro有无线充电功能打不开怎么办)

  • .apk是什么(.apk是什么文件,会窃取隐私吗?)

    .apk是什么(.apk是什么文件,会窃取隐私吗?)

  • timeout命令  在指定的时间应在运行则杀死该进程(timeout&f)

    timeout命令 在指定的时间应在运行则杀死该进程(timeout&f)

  • 消费税是什么意思大白话
  • 纳税检查调整的滞纳金怎么收
  • 公司缴税怎么计算的
  • 增值税包括哪些内容
  • 预提的费用在做所得税的时候如何处理
  • 公司零星支出没有发票收据怎么开
  • 开业前所有费用叫做什么
  • 发票开票人是管理员可以吗
  • 收到生育津贴会计分录怎么做
  • 中外合资经营企业法
  • 发票丢失怎样写说明
  • 出售多余材料会计科目
  • 餐饮无票收入怎么做账
  • 减少实收资本会引起资产和所有者权益发生变化吗
  • 法人转钱到公户是借款还是投资款
  • 从支付宝里可以查出结婚个人信息吗
  • 地勘单位需要什么资质
  • 递延年金现值计算公式解释
  • 替票是什么和发票的区别
  • 软件服务费是什么
  • 合伙企业合伙人工资的账务处理
  • windows10如何移动文件
  • 企业所得税是什么时候计提
  • 筹资费用的含义
  • 上年度所得税未计提已交本年度如何计提
  • 在公司预支费用怎么写单据
  • 鼠标怎么设置为右键功能
  • 关闭系统自动调屏幕亮度
  • 购买生产用品计入什么科目
  • 视同销售行为的涉税处理?
  • php如何实现伪静态
  • 微信小程序和web端的交互
  • 代缴房产税代缴的人要负责吗
  • 小迪安全2021
  • blockdata指令怎么用
  • 命令who的含义
  • 小规模增值税结转账务处理
  • python中的生成器
  • java阻塞队列线程安全吗
  • mongodb 入门
  • 政府会计财务报表有哪些
  • 工会账以固定资产投资
  • 代收电费增值税品目
  • mysql文件更改存放路径
  • 增值税减免税申报表
  • 文化事业建设税是含税还是不含税
  • 安防工程的注意事项
  • 增值税专用发票抵扣期限
  • 费用利润率计算公式是怎样的?
  • 关于幼儿园的会议内容
  • 母公司与子公司税务关系
  • 小规模纳税人转一般纳税人当月如何申报
  • 社保申报工伤怎么操作
  • 无进项发票开具销项发票
  • 小企业会计核算论文
  • python的底层语言
  • mysql读写分离实现原理
  • win8系统无线网找不到
  • centos更新yum update
  • win8的ie浏览器
  • xp电脑怎么样
  • win10 自带软件
  • windows8怎么设置
  • win10怎么把中文系统改成英文
  • win10每周更新
  • win7旗舰版怎么重装系统教程
  • win7右键没有
  • 龙芯芯片组
  • win8怎么看windows
  • JS实现的ajax和同源策略(实例讲解)
  • Unity的WWW类的用法整理
  • 也论主板的扩展性
  • js如何判断一个变量的类型
  • 完美实现碳排放自主抵消的工厂叫什么
  • 什么是城建税和土地税
  • 纳税人谈感受
  • 河南工商年检网上申报
  • 北京市国家税务局官网手机app
  • 江苏医保网上服务大厅
  • 火灾损失进项税额怎么处理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设