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

  • 最实用的网络推广四种方法(常用的网络推广平台有哪些呢)

    最实用的网络推广四种方法(常用的网络推广平台有哪些呢)

  • iqooneo5s屏幕是E3还是E4(iqooneo5s屏幕是2k屏吗)

    iqooneo5s屏幕是E3还是E4(iqooneo5s屏幕是2k屏吗)

  • 苹果手机有个角为什么变暗(苹果手机有个角落比较暗怎么办)

    苹果手机有个角为什么变暗(苹果手机有个角落比较暗怎么办)

  • 微信扫脸解封过不去怎么办(微信解封扫脸怎么回事)

    微信扫脸解封过不去怎么办(微信解封扫脸怎么回事)

  • g5420处理器相当于i几(g5420处理器办公怎么样)

    g5420处理器相当于i几(g5420处理器办公怎么样)

  • 笔记本有几种充电方法(笔记本电脑充电是什么样的)

    笔记本有几种充电方法(笔记本电脑充电是什么样的)

  • wpssmartart在哪里找(wps上的smartart在哪)

    wpssmartart在哪里找(wps上的smartart在哪)

  • 台式连接不可用大红叉(台式连接不可用红叉怎么办)

    台式连接不可用大红叉(台式连接不可用红叉怎么办)

  • 苹果手机照片删除云端还有吗(苹果手机照片删除了icloud里还有吗)

    苹果手机照片删除云端还有吗(苹果手机照片删除了icloud里还有吗)

  • 视频怎么放大某个地方(视频怎么放大某个人的脸)

    视频怎么放大某个地方(视频怎么放大某个人的脸)

  • 手机为什么突然黑屏没反应(手机为什么突然黑屏打不开怎么办)

    手机为什么突然黑屏没反应(手机为什么突然黑屏打不开怎么办)

  • vivo手机系统安全在哪里(vivo手机系统安装包)

    vivo手机系统安全在哪里(vivo手机系统安装包)

  • 黄瓜视频怎么购买会员(黄瓜视频vip能买吗)

    黄瓜视频怎么购买会员(黄瓜视频vip能买吗)

  • 电脑主板怎么设置(电脑主板怎么设置密码)

    电脑主板怎么设置(电脑主板怎么设置密码)

  • 威客模式是什么(威客模式是什么模式)

    威客模式是什么(威客模式是什么模式)

  • fast300m路由器设置(fast300m路由器设置重置后没有网)

    fast300m路由器设置(fast300m路由器设置重置后没有网)

  • 朋友圈怎么关闭(朋友圈怎么关闭全部)

    朋友圈怎么关闭(朋友圈怎么关闭全部)

  • 圆角屏和刘海屏区别(圆角屏和刘海屏哪个好)

    圆角屏和刘海屏区别(圆角屏和刘海屏哪个好)

  • RegSrvc.exe - RegSrvc是什么进程 有什么用

    RegSrvc.exe - RegSrvc是什么进程 有什么用

  • Vue中的methods方法使用技巧,三分钟迅速读懂(vue中methods的作用)

    Vue中的methods方法使用技巧,三分钟迅速读懂(vue中methods的作用)

  • JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()(js数组entries)

    JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()(js数组entries)

  • java守护线程如何理解(java守护线程和普通线程jvm区别)

    java守护线程如何理解(java守护线程和普通线程jvm区别)

  • 递延所得税资产账务处理
  • 企业发生的职工培训费应计入产品的制造成本
  • 劳务费可以开工程服务发票吗
  • 救援车拉货交警查吗?
  • 企业购进软件系统后如何做账
  • 视同销售税率如何确定?
  • 专项资金可以存定期吗
  • 完工绿化苗木怎样结转成本?
  • 老师课时费计入什么科目
  • 材料采购做账的流程
  • 购入但未开始使用的房产
  • 旧机动车交易需要哪些法定证件
  • 小规模纳税人提供设计服务税率
  • 接受实物投资的增值税会计核算方法
  • 建筑企业如何才能上市
  • 建筑业简易计税分包差额申报
  • excel自动计算增值税
  • 销售不动产增值税税率变化
  • 建筑施工单位可以安装电表吗
  • 员工受伤报销
  • 计提本月银行借款
  • 公益性捐赠所得税处理
  • 公司对项目的资金支持
  • 房地产企业申请破产,原来的购房合同还有效吗?
  • 企业利用外资
  • 企业转让房产所得税税率
  • win10粘贴复制无效
  • 减半征收所得税的有哪些
  • 什么是资产负债率,如何计算
  • phpstorm怎么用
  • 股份支付的确认和计量原则
  • 销售产品的运输费属于什么会计科目
  • php的框架有哪些
  • 销售商品的结转
  • 其他货币资金明细科目有哪些
  • 残疾人就业保障金计入什么科目
  • 代销手续费的税率
  • 劳动法节假日加班工资
  • 限定性和非限定性资产的区别
  • 视同销售是怎么回事?
  • 以前年度损益调整账务处理分录
  • 普票是啥意思
  • 计提坏账准备如何做会计分录
  • 安装调试费属于劳务还是服务
  • 记账凭证结算方式没出来
  • 发工资的是会计还是出纳
  • 其他综合收益的二级科目有哪些
  • 应付账款的发生额怎么算
  • 客户付款是借方还是贷方
  • 内部转账单怎么填制
  • 直接计入管理费用的税金有哪些
  • 如何审计营业收入
  • 弥补上年亏损的分录 所得税
  • sql not in 与not exists使用中的细微差别
  • sqlserver优化的几种方法
  • sql比较数值大小
  • mysql5717安装详细过程
  • xp ie浏览器无法显示网页
  • solaris删除文件命令
  • win7升级win10之后视频解码能力变弱
  • U盘安装centos7步骤
  • register.exe - register进程有什么用.是什么意思
  • 如何自定义win键
  • 磁盘分区右键是灰色的
  • 移动宽带解绑怎么办理
  • linux sh
  • javascript详解
  • easyui datagrid loader
  • div+css布局是什么
  • linux curl命令详解
  • python 递归函数与循环的区别
  • android的动画有哪些?
  • js获取当前月份的天数
  • 发票扫码抽奖用什么软件
  • 车船税多少钱一辆
  • 国家税务总局可以设定行政处罚吗
  • 房子的地税发票丢了怎么补办
  • 税收优惠政策有什么公司受影响
  • 湖北退役士兵退伍费
  • 农产品进项税额核定扣除办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设