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

  • 购买汽车的印花税要计入汽车原值吗
  • 资本公积转增资本的限制条件
  • 所得税汇算清缴账务处理
  • 个税返还手续费奖励员工账务处理
  • 调整以前年度少计提的工资
  • 金蝶财务系统录入发票
  • 企业文化事业建设费计算
  • 农产品收购发票可以跨区域开吗
  • 一次性预收租金增值税
  • 存货的加工成本指的是加工过程中发生的追加费用
  • 营改增试点纳税人提供有形动产租赁服务,税率为
  • 上个月没有结账可以做下个月的账吗
  • 银行汇票转给第三方怎么操作
  • 劳务费的专用发票有哪些
  • 购买固定资产没付款怎么入账
  • 部门奖金怎么入账
  • 企业转企业对公账户
  • 核销的方式
  • 财产租赁所得个人所得税计算方法2020
  • 成本核算会计科目包括
  • 企业自行出版的报刊费用可否认证抵扣?
  • 广告公司可以开维修费吗
  • 销项税额是负数是怎么回事
  • 确认国债利息收入的依据
  • 投资款怎么做会计科目
  • 增值税的调增调减
  • 未知文件格式怎么打开
  • 如何结束excel
  • 现金付款没收据怎么入账
  • linux docx
  • 企业所得税法规定,企业购置并实际使用
  • 汇算清缴后补缴企业所得税账务处理
  • 在途物资属于什么科目借贷方向
  • mssearch.exe - mssearch是什么进程 有什么用
  • 无形资产投资后退出
  • php 方法
  • 房地产企业出售房产增值税
  • 员工加班餐费该怎么算
  • 金碟怎么初始化
  • 购买黄金会计分录怎么写
  • 软件产品增值税即征即退
  • mysql导入sql文件命令
  • 向税务局缴纳工会经费的没计提
  • 商场收取租户电费合法吗
  • 本月未抵扣完的进项税是否转出
  • 一般纳税人的月销售额是多少可以不用交增值税
  • 内部损益是什么
  • 查定征收和查验征收怎么区分
  • 医院产生的相关费用
  • 应交税费进项税额转出
  • 电信通讯费发票抬头
  • 企业风险管理有哪些方面
  • sqlserver查询数据库数据量
  • MySql 5.6.14 winx64配置方法(免安装版)
  • win81蓝屏重启故障
  • win2003网络设置
  • 新装的ubuntu18没有网络
  • 怎么快速判断哪些角是第几象限
  • centos安装图形oracle11g
  • 电脑pc的操作系统叫什么
  • windows 10 mobile--移动版
  • Win10 Mobile build 10586.338上手视频曝光
  • 2016年首个熊猫电站是哪一个
  • linux的虚拟终端有几个
  • linux使用mv命令,结果文件不见了
  • android skia opengl
  • android:ListView的局部刷新
  • unity怎么用
  • unity 技术
  • javascript操作dom对象
  • 神奇宝贝
  • node.js golang
  • unity的vs
  • unity3d documentation
  • javascript命名规范
  • jquery formbuilder
  • 陕西宝鸡国税人才招聘
  • 为什么购进固定资产不得抵扣
  • 退休军人免门票吗
  • 大企业如何做好工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设