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

  • 税收滞纳金调增填哪张表
  • 财务软件交多少钱印花税
  • 综合收益总额与什么有关
  • 增值税纳税义务发生地点的规定
  • 错账更正方法有哪几种
  • 出纳发票不见了可以用微信转账记录记账吗
  • 硬盘录像机开发板
  • 会计凭证辅助项
  • 废旧物资增值税税收优惠政策
  • 汽车保险费可以抵扣吗
  • 法院一直扣着我的钱不给可以起诉他吗
  • 工程检测费占工程金额多少
  • 前年度库存商品少结转业务怎么处理?
  • 企业所得所得税税负
  • 小规模纳税人补缴增值税
  • 办税员实名认证变更
  • 增值税普通纳税人税率
  • 税务机关代开的普通发票上无需加盖收款方的印章
  • 现金流量表中所指的现金是指( )
  • 审计报告可以不披露上年数吗
  • 筹建期间的工资可以直接记到管理费用吗
  • 进项发票已经抵扣怎么做退回处理
  • 中小企业划分标准
  • 没有结转损益影响利润表吗
  • 其他应付款下的固定资产怎么报废
  • 中国石化开的增值税票是几个点的
  • 购买树苗计入会计科目吗
  • 什么叫交付使用
  • 未开票收入申报后又要开票
  • 销售预付款会计分录
  • 如何使用定向流量
  • 如何去掉电脑桌面背景图
  • 民办非企业单位是什么企业类型
  • 银行支付的存款怎么做账
  • 如何利用路由器登陆花生壳
  • 备用金会涨额度吗
  • 职工福利费入账依据
  • 反斜杠python
  • 基于ansible的运维平台
  • 自然语言处理属于人工智能的哪个领域
  • 修改公司章程注意事项
  • 个税在工资里怎么计提
  • 凭证过账后发现了错误,如何处理
  • 事业单位回复短信里的加号要吗
  • mysql数据库介绍官方
  • 本期转让不动产的销售额是什么意思
  • 企业向个人借款协议范本
  • 税控盘服务费抵减增值税如何申报
  • 借应付职工薪酬贷财政拨款收入
  • 商业企业购入商品
  • 银行电子承兑到期后怎么操作
  • 消防设施安装费收费标准
  • 公司现金收付管理
  • 自己开发财务软件
  • 逐步测试法计算内含报酬率
  • mac安装mysql的两种方法(含配置)
  • mysql join实现原理
  • xp系统如何安装
  • win7卸载程序找不到软件
  • 安装windows server 2008 r2
  • 桌面快捷方式不显示图标怎么办
  • 电脑显示windowsxp不能进入桌面
  • icg是什么文件
  • win8中文版怎么升级到win10
  • win10桌面图标显示错误
  • linux igb
  • win7电脑无法正常启动系统
  • w8系统ie浏览器在哪
  • win8系统教程
  • js模拟登录网站
  • unity特效制作教程
  • perl 运算
  • Unity3D游戏开发标准教程
  • math在java
  • android sdk在哪下载
  • jquery获取php变量
  • jquery formbuilder
  • 如何查询纳税信用等级证明
  • 税务注销核对发票怎么办
  • 安徽省合肥市地震多少级
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设