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

  • vivo手机闪光灯怎么开启?(vivo手机闪光灯怎么设置)

    vivo手机闪光灯怎么开启?(vivo手机闪光灯怎么设置)

  • 苹果13怎么关闭程序(苹果13怎么关闭运行程序)

    苹果13怎么关闭程序(苹果13怎么关闭运行程序)

  • jef-an20是什么型号(型号jer-an20是什么机型)

    jef-an20是什么型号(型号jer-an20是什么机型)

  • 苹果安装不了第三方软件(iphone安装不了app怎么办)

    苹果安装不了第三方软件(iphone安装不了app怎么办)

  • 修改实名认证为什么账号与不符(修改实名认证为什么要申诉)

    修改实名认证为什么账号与不符(修改实名认证为什么要申诉)

  • 好友申请记录突然没了(我的好友申请记录)

    好友申请记录突然没了(我的好友申请记录)

  • 电话手表可以用自己的手机卡吗(电话手表可以用充电宝充电吗?)

    电话手表可以用自己的手机卡吗(电话手表可以用充电宝充电吗?)

  • ctrlf6是什么快捷键(ctrl f快捷键的作用)

    ctrlf6是什么快捷键(ctrl f快捷键的作用)

  • hifi级别的音乐手机(hifi 推荐)

    hifi级别的音乐手机(hifi 推荐)

  • 电脑别人听不见我说话怎么办(电脑听不到声音怎么回事)

    电脑别人听不见我说话怎么办(电脑听不到声音怎么回事)

  • 快手怎么建第二个号(快手怎么创建第二个群)

    快手怎么建第二个号(快手怎么创建第二个群)

  • 行距30磅怎么设置(行距30磅怎么设置wps)

    行距30磅怎么设置(行距30磅怎么设置wps)

  • oppo手机怎么调成老年模式(oppo手机怎么调电池百分比)

    oppo手机怎么调成老年模式(oppo手机怎么调电池百分比)

  • word文档怎么画点画线(word文档怎么画线条)

    word文档怎么画点画线(word文档怎么画线条)

  • ios13怎么下载第三方软件(ios13.4怎么下载)

    ios13怎么下载第三方软件(ios13.4怎么下载)

  • 抖音长腿特效怎么弄(抖音长腿特效怎么找不到)

    抖音长腿特效怎么弄(抖音长腿特效怎么找不到)

  • 为什么vivoz5耗电有点快(vivoz5耗电严重)

    为什么vivoz5耗电有点快(vivoz5耗电严重)

  • 华为手机有定位功能吗(华为手机有定位功能吗?在哪里找)

    华为手机有定位功能吗(华为手机有定位功能吗?在哪里找)

  • 小米游戏模式怎么设置(小米游戏模式怎么添加到桌面)

    小米游戏模式怎么设置(小米游戏模式怎么添加到桌面)

  • 苹果x主板坏了的症状(苹果x主板坏了回收多少钱)

    苹果x主板坏了的症状(苹果x主板坏了回收多少钱)

  • 好友纪念日怎么看(好友纪念日怎么发说说)

    好友纪念日怎么看(好友纪念日怎么发说说)

  • 小米9是双卡吗(小米9是双卡双待手机吗)

    小米9是双卡吗(小米9是双卡双待手机吗)

  • 华为p20如何投屏(华为p20如何投屏抖音)

    华为p20如何投屏(华为p20如何投屏抖音)

  • 适合女生的相机(适合女生的相机软件)

    适合女生的相机(适合女生的相机软件)

  • 【今日清明】( © yangphoto )(今日清明节的下一句是什么)

    【今日清明】( © yangphoto )(今日清明节的下一句是什么)

  • 应税工资怎么计算出来的
  • 小微企业免税销售额是按1%还是3%
  • 资产处置损益影响所有者权益总额吗
  • 季度企业所得税可以不预缴吗
  • 简易计征开什么发票
  • 待抵扣进项税额和待认证进项税额的区别
  • 公司分立的账务处理凭证怎么做
  • 现代服务业要满足什么条件才转一般纳税人
  • 全国失信人员信息
  • 红字记账的四种登记方式
  • 个体户定额定税要做账吗
  • 劳务派遣一般纳税人可以简易征收吗
  • 企业收到固定资产投资时应按什么入账
  • 产品毛利率计算表
  • 公司负担劳务费的个税如何做分录
  • 抵债资产会计核算办法
  • 返利计提分录
  • 收款收据怎么写 样本
  • 小规模纳税人确认收入时要确认税吗
  • 固定资产转在建工程提折旧吗
  • 先入费用后来发票怎么做账
  • 微软笔记本
  • 销户余额转出总公司怎样记账
  • php sql 教程
  • 农产品增值税进项税额
  • element-plus vue
  • 上月抵扣的发票怎么开
  • 伊兰简介
  • php取二维数组的一组内容
  • 小规模与一般纳税人做账区别
  • 收到银行开具的手续费的专票会计分录
  • php中面向对象
  • 增值税上期留抵税额
  • laravel创建model
  • 专票地址错了要作废吗
  • python设置断点
  • 工作服钱可否收取
  • 代销手续费的税率
  • 长期待摊费用装修款如何摊销
  • 增值税及附加交给国税还是地税
  • 金税盘税控盘和税务Ukey有什么区别
  • javascript 箭头
  • c语言缺省值
  • 企业所得税季报人数季度初值
  • 资产负债表怎么看盈利或亏损
  • mysql数据数据库
  • 银行每月贷款额度有多少
  • 本年利润的会计分录怎么做
  • 应交增值税负数表示什么
  • 增值税少企业所得税高吗
  • pycharm怎么安装mysql
  • 小微企业税收优惠政策从什么时候开始
  • 印花税减免计入什么科目
  • 发票开错抬头做红字发票的账务处理是?
  • 去年暂估费用,今年收到发票怎么处理
  • 安装调试费收费标准
  • 诉讼费给开发票吗
  • 2020发票丢失新规
  • 专票不报销公司查得到吗
  • 财务常见问题有哪些
  • 包装袋制版费
  • 制造费用结转到哪个科目
  • 工业企业建立账套
  • 工业企业增值税纳税义务发生时间
  • sql 截取字符串某个字符之后
  • win8.1应用
  • 在操作系统中如何创建一个新的用户
  • win8.1无法进入系统
  • Extjs grid panel自带滚动条失效的解决方法
  • c#+unity3d
  • 设计一个windows
  • Emeditor与dos(cmd)经典使用技巧之批量生成网页
  • oracle批处理语句
  • unity删除对象
  • 基于jQuery和Bootstrap的设计报告的参考文献
  • 国家税务局总局广东省电子税务局官网
  • 西安未央区的面积
  • 纳税人办理汇算清缴
  • 监察室主任岗位职责
  • 湖北国税发票手机查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设