vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

news2025/1/26 14:41:28

先看需求:(不想看的直接拉到最后)

 【需求说明】

6、如状态为上架时,库存为必填,下架状态时,库存为可填,前面无星号

实现方法:使用this.$set()和this.$delete()

上代码:

由于设计商业隐私,代码只上传一部分:
 

<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"]);
       }
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407785.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue2 + JSX使用总结

什么是JSX 摘自 React 官方&#xff1a; 它被称为 JSX&#xff0c;是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX&#xff0c;JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言&#xff0c;但它具有 JavaScript 的全部…

前端人必看的JS面试题汇总

面试是每一个前端人在求职过程中都需要面对的事情。在面试过程中&#xff0c;面试官没有办法通过实践操作去了解应聘者的技能水平&#xff0c;所以他们更多地会通过“八股文”的考察来判断你是否符合公司的招聘要求。所以作为一个前端人&#xff0c;在掌握好前端技能的同时&…

vue导出word

最近的项目中&#xff0c;需要把vue中的部分内容导出为word形式&#xff0c;之前没有做过这方面的&#xff0c;特记录&#xff0c;由于是初学&#xff0c;所以整理了此模板&#xff0c;注意&#xff1a;这是一个模板&#xff0c;并不是相关字段的解析&#xff0c;每个字段都是做…

ECharts柱状图关闭鼠标hover时的高亮样式

最近在做图表相关的需求&#xff0c;使用的是echarts来画图。 今天算是遇到一个比较坑的点了吧&#xff0c;就是两根柱状图重叠对比&#xff0c;设计图把某根柱状图的颜色设计得比较浅&#xff0c;因为echarts的柱状图本身hover到柱子上的时候&#xff0c;会有个高亮状态&…

JavaScript纯前端解析Excel文件

最近在开发时候遇到了这样的一个需求&#xff1a;需要在前端通过解析Excel将Excel中的值进行回传填入。我想在实际的开发过程中&#xff0c;肯定大家也会遇到这样的需求&#xff0c;在这介绍一个比较不错的JS工具库&#xff1a;js-xlsx&#xff0c;及该库的简单使用方法。 1、…

Three.js-设置环境纹理及加载hdr环境贴图

目录 1.hdr 2.环境纹理&#xff08;全景&#xff09; 3.CubeTextureLoader加载立方体环境纹理 4.RGBELoader环境纹理加载 1.hdr HDR全称High-Dynamic Range&#xff08;高动态光照渲染&#xff09;&#xff0c;通过HDR&#xff0c;显示器或相机可以很好的表现超出其亮度范围…

vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

vue3 ant design vue项目实战——Form表单【v-model双向绑定数据实现form表单数据的提交】上期文章回顾【UI界面渲染】场景复现&#xff08;源代码附在文章最后&#xff09;实现需求1.表单数据及其类型的定义2.表单及各部分数据的双向绑定3.表单提交功能4.校验输入内容不为空5.…

vue-数据绑定

目录 1 数据绑定 2 绑定方式 2.1 单向绑定 2.2 双向绑定 1 数据绑定 Vue中有两种数据绑定方式&#xff1a; 1 单向绑定(v-bind)&#xff1a;数据只能从data流向页面。 2 双向绑定&#xff08;v-modle&#xff09;&#xff1a;数据不仅能从data流向页面&#xff0c;还能从页…

VSCode开发:使用nvm切换node版本

为什么要切换node版本&#xff0c;是因为npm run dev(vant app&#xff09;时&#xff0c;报了Error [ERR_REQUIRE_ESM]&#xff1a;Must use import to load ES Module这样的错。我使用的node版本是12.16.3&#xff0c;切换到16.15.1就没有这个问题了。 1. 安装nvm前记得要删…

【node进阶】深度解析express框架---编写接口|解决跨域问题

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

Vuex 学习

什么是vuex&#xff1a; 专门在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue插件&#xff0c;对vue应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&#xff0c;且适用于任意组件间通信。 原理…

clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装

文章目录前言一、如何解决clone下来的vue项目出现“An unknown git error occurred”&#xff1f;二、vue全局挂载axios并设置全局的请求和响应拦截1.先下载安装好axios&#xff0c;这个就不用多说了2&#xff0c;vue2中的全局挂载:3,在vue3中我们又应该怎么全局挂载axios呢&am…

vue中使用百度地图

vue中使用百度地图 之前写过一篇vue调用百度地图的文章&#xff0c;但是写得不是很清晰&#xff0c;所以重新整理一篇&#xff1b;申请百度地图ak 这个我在之前的那篇文章已经讲过&#xff0c;就不再细说&#xff0c;链接如下&#xff1a;vue调用百度地图 初始化地图 引入地图…

同一页面实现recycleView三种布局【recycleView + adapter】

文章目录&#x1f96d;&#x1f96d;简介&#x1f96d;&#x1f96d;效果图&#x1f96d;&#x1f96d;代码&#x1f34e;&#x1f34e;三个Adapter修饰器&#x1f34e;&#x1f34e;主界面函数 && FuritBean&#x1f34e;&#x1f34e;布局文件&#x1f96d;&#x1f…

js获取dom元素宽高

一&#xff0c;前言 1.对于css盒子模型&#xff0c;我们使用width和height等来定义dom元素的宽高&#xff0c;而有时我们需要在js中获取元素的宽高进行一些操作。 2.dom操作提供了相应的属性来实现这一点 二&#xff0c;clientWidth和clientHeight 1.clientWidth和clientHe…

js监听页面或元素scroll事件,滚动到底部或顶部

基本原理&#xff1a; 1、滚动到底部 元素的滚动距离 元素的可视距离 元素的滚动条总距离2、滚动到顶部 元素的滚动距离 0监听页面滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv&…

Flask:使用SocketIO实现WebSocket与前端Vue进行实时推送(gevent-websocket、flask-socketio、flask不出现running on 127..问题)

前言 本文旨在记录使用Flask框架过程中与前端Vue对接过程中&#xff0c;存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后&#xff0c;导致运行Flask项目之后&#xff0c;控制台没有显示running on 127.0.0.1:5000…

Vue复刻华为官网(三)

文章目录1 底部列表1.1 思路1.2 代码1.3 效果图1.3.1 搜索框1.3.2 商标2 公司信息2.1 思路2.2 代码2.3 效果图3 上升按钮3.1 思路3.2 代码3.3 效果图4 图标完善4.1 思路4.2 安利图标库1 底部列表 1.1 思路 如上图&#xff0c;这整个的大盒子&#xff0c;又可以被分为上中下三个…

[JavaScript你真的以为这么简单吗]JavaScript高级

✅作者简介&#xff1a;大家好,我是Philosophy7&#xff1f;让我们一起共同进步吧&#xff01;&#x1f3c6; &#x1f4c3;个人主页&#xff1a;Philosophy7的csdn博客 &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大…

three.js中坐标系转换以及camera的position、lookAt与up属性理解

为了更好的理解camera的position、lookAt与up属性&#xff0c;文章最开始我们先来阐述three.js的坐标系转换的概念。 1.监听event的事件获得屏幕坐标 文章的最开始首先讨论在哪里进行点击事件的监听的问题&#xff0c;当鼠标触发点击事件时&#xff0c;event会输出点击位置相对…