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

  • 税收分类编码怎么导出来
  • 退休职工能否扣医保
  • 出差飞机票报销标准
  • 账户利息怎么做账务处理
  • 政府补贴营业外收入所得税汇算清缴需要调增吗
  • 企业销售不动产增值税政策
  • 企业出现亏损的原因有哪些
  • 劳务收入个税的计算方法
  • 企业增加注册资金怎么办理
  • 长期待摊费用进项税可以一次性抵扣吗?
  • 个体工商户生产经营所得税率
  • 房地产公司预收账款明细科目
  • 受托加工费的成本都有什么
  • 商业保险可以报税吗
  • 广告宣传费可以抵扣进项税吗
  • 小规模免征增值税政策
  • 补缴以前年度的印花税账务处理
  • 被强制升为一般纳税人的条件
  • 个人独资企业取得的股息红利
  • 公司账户替别人过账
  • 在win7系统中如何让电脑恢复出厂设置方法
  • linux测验
  • windows11怎么操作
  • 明细分类帐户
  • mac快捷键是什么意思
  • 会计月末账务处理流程图
  • vue3怎么用
  • Bàu Cá Cái的红树林,越南广义 (© Robert Harding World Imagery/Offset)
  • php 读取大excel
  • php怎么建立数据库mysql
  • Vue3 script setup 语法糖详解
  • 2022年终总结
  • python累加求和代码,直到最后一项小于10^-6
  • 工资和社保基数不一致
  • 个税系统有什么用
  • 公对公二手车交易税
  • CentOS 6.5 x64系统中安装MongoDB 2.6.0二进制发行版教程
  • python如何建立函数
  • 电费已付,没有收到发票
  • 购买材料发票未到如何做账?
  • 商业承兑汇票贴现什么意思
  • 个人所得税进什么科目
  • 以红字冲回
  • 现金流量表编制实操
  • 混合销售举例说明
  • 销售预付卡的账务处理
  • 小规模纳税人购进商品会计分录
  • 应付账款的逾期利息计入什么科目
  • 银行贷款损失的计算公式
  • 公司发放节日礼品
  • 企业注销在建工程怎么处理
  • 定期存款放入哪个会计科目
  • 未按照规定编制应急预案的,责令限期改正,可以处罚款
  • 收到投资款怎么做凭证
  • 登记三栏式现金日记账和银行存款日记账的依据
  • Win10系统怎么进入控制面板
  • ubuntu怎么修改网络配置
  • 证书登录什么意思
  • win7 管理
  • dvdrom是什么
  • linux中bc命令
  • win10每周更新
  • fdb是什么文件
  • linuxvi编辑器的用法
  • Win7开机黑屏只有鼠标,进入安全模式也是黑屏
  • linux如何结束正在运行的进程
  • win7怎么设置工作组共享
  • win7删除开机启动程序
  • 基于nodejs的项目
  • linux磁盘空间满了怎么办,硬盘空间还有很多
  • NGUI简介
  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
  • 英特尔在哪打开
  • python计算π值
  • Easyui 之 Treegrid 笔记
  • 从重置手
  • js实现省份和市级联动
  • 国税总局17号公告
  • 减免所得税额怎么算的
  • 福建广电网上营业厅下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设