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

  • 应预缴税款如何计算?
  • 购买财务软件做什么科目
  • 期末账项调整的基础是
  • 股权转让给个人和公司的区别
  • 科目余额表凭证号顺序
  • 印花税计税基数不包括哪些
  • 印花税的计税依据为各种应税凭证上所记载的计税金额
  • 业务招待费包括住宿费吗
  • 逾期支付工程款利息计算
  • 节税租赁和销售的区别
  • 出口退税当期不得免征和抵扣的税额
  • 收到股东借款的现金
  • 房地产企业自行开发的房地产项目
  • 企业法人信息变更
  • 本期免税收入是什么
  • 财税2018年39号公告残保金
  • 返还的个税手续费奖励给个人需要缴纳个税吗
  • 所有者权益为什么是负债
  • 未确认融资费用属于企业资产类科目对不对
  • 公司全额承担个税会计分录
  • 普通发票的进项票怎么做分录
  • 进项税和销项税怎么理解
  • 独享20m网速快吗
  • 电脑桌面换壁纸的软件
  • win10新装系统我的电脑在哪
  • 怎么解锁城堡上空
  • yii2开发文档
  • 达拉斯位置
  • 调整多计提企业利润
  • 汇兑应计入哪个科目
  • 先买入再卖出
  • phpcurl模拟登录
  • 【BEV】TPVFormer复现以及原理
  • 新必应申请使用资格
  • php反射机制实现自动依赖注入
  • 利息支出是利息费用嘛
  • 扶贫资金入股问题
  • wordpress安装主题致命错误
  • mongodb数据库查询用多少存储
  • 增值税的征收对象是谁
  • 如何判断固定资产已提足折旧
  • sql server标识符
  • 金税四期一般纳税人开票先票后款行吗
  • 生产成本月末有余额资产负债表平衡吗
  • sql 获取指定字符位置
  • 预收账款是资产类科目吗
  • 复印件可以作为会计原始凭证吗
  • 购买理财产品如何防诈骗
  • 关于小规模纳税人的说法正确的是
  • 确认主营业务收入分录怎么写
  • 租赁出租人分录
  • 免抵退税中免抵税额怎么算
  • 怎么开具
  • win10安装sqlserver2016出错
  • sql必会知识
  • mysql5.7.27安装
  • usb3.0接口可以插优盘吗
  • win8怎么彻底删除软件
  • ubuntu20.04怎么用
  • centos7怎么看cpu和内存
  • xp系统安装版
  • win10系统局域网共享打印机设置
  • win7主题服务未运行怎么办
  • json和ui
  • jquery日程安排
  • jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
  • jquery取value
  • react 系列
  • jquery二级导航栏
  • jQuery EasyUI之DataGrid使用实例详解
  • jquery弹窗弹出一个页面
  • jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
  • javascript标签大全
  • jquery使用教程
  • jQuery EasyUI Pagination实现分页的常用方法
  • 济南社保减免政策2020通知
  • 非居民企业所得税税率
  • 100万元的人民币
  • 苹果关税多少钱一个
  • 山东税务自然人注册怎么回事
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设