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

  • 小爱同学怎么唤醒(小爱同学怎么唤醒手机)

    小爱同学怎么唤醒(小爱同学怎么唤醒手机)

  • 红米k40nfc感应区在什么地方(红米k40nfc感应区在哪里)

    红米k40nfc感应区在什么地方(红米k40nfc感应区在哪里)

  • 苹果来电铃声刚开始很大后来很小(苹果来电铃声声音逐渐变小)

    苹果来电铃声刚开始很大后来很小(苹果来电铃声声音逐渐变小)

  • 刚办的手机卡能注销吗(刚办的手机卡能过户吗)

    刚办的手机卡能注销吗(刚办的手机卡能过户吗)

  • vivox20a电池容量多少(vivox20a电池容量多大毫安)

    vivox20a电池容量多少(vivox20a电池容量多大毫安)

  • 苹果手机充电器能给ipad充电吗(苹果手机充电器发烫是什么原因)

    苹果手机充电器能给ipad充电吗(苹果手机充电器发烫是什么原因)

  • AirPodspro不弹窗咋回事(airpodspro不弹窗怎么看电量)

    AirPodspro不弹窗咋回事(airpodspro不弹窗怎么看电量)

  • vivo手机关机键失灵了怎么办(vivo手机关机键坏了怎么修)

    vivo手机关机键失灵了怎么办(vivo手机关机键坏了怎么修)

  • 美团永久封禁怎么解除(美团永久封禁怎么解封)

    美团永久封禁怎么解除(美团永久封禁怎么解封)

  • 华为手机首页的时间没有了怎么办(华为手机首页的天气预报怎么弄回来)

    华为手机首页的时间没有了怎么办(华为手机首页的天气预报怎么弄回来)

  • note4和note4x区别

    note4和note4x区别

  • qq在线为什么显示离线(qq在线为什么显示4g)

    qq在线为什么显示离线(qq在线为什么显示4g)

  • 如何把qq状态弄成离线(如何把qq状态弄到桌面)

    如何把qq状态弄成离线(如何把qq状态弄到桌面)

  • 怎么设置自定义闹钟铃声(怎么设置自定义图标)

    怎么设置自定义闹钟铃声(怎么设置自定义图标)

  • 手机下载的软件打不开怎么办(手机下载的软件在哪个文件夹)

    手机下载的软件打不开怎么办(手机下载的软件在哪个文件夹)

  • 怎么设置横屏模式(怎么设置横屏模式手机)

    怎么设置横屏模式(怎么设置横屏模式手机)

  • wps下划线在哪(wps设置下划线)

    wps下划线在哪(wps设置下划线)

  • seaal10是什么型号手机(sea—al10是什么型号多少钱)

    seaal10是什么型号手机(sea—al10是什么型号多少钱)

  • 如何把视频下载到mp3(如何把视频下载到手机相册)

    如何把视频下载到mp3(如何把视频下载到手机相册)

  • ipad97英寸是哪几款(ipad97英寸是ipad几)

    ipad97英寸是哪几款(ipad97英寸是ipad几)

  • 快手必须挂小黄车吗(快手挂小黄车有什么要求吗)

    快手必须挂小黄车吗(快手挂小黄车有什么要求吗)

  • KB4480973更新内容有哪些(kb4586819更新)

    KB4480973更新内容有哪些(kb4586819更新)

  • 爱丽丝镇附近水域中的柠檬鲨宝宝,巴哈马比米尼岛 (© Ken Kiefer 2/Getty Images)(爱丽丝小镇在哪)

    爱丽丝镇附近水域中的柠檬鲨宝宝,巴哈马比米尼岛 (© Ken Kiefer 2/Getty Images)(爱丽丝小镇在哪)

  • 销售软件税目
  • 国际重复征税的前提条件是
  • 发票开错抬头做红字发票的账务处理
  • 交易性金融资产的交易费用计入哪里
  • 银企对账如何操作
  • 商品类别发票能抵扣吗
  • 四川网上电子税务局
  • 计提印花税走什么科目
  • 增值税是否计入固定资产成本
  • 用友软件销售操作流程
  • 购入固定资产如何摊销
  • 开了负数发票印花税减掉吗?
  • 利润借方余额表示盈利还是亏损
  • 租金小规模开票税率
  • 收到的发票开票人是管理员,这样可以吗?
  • 新25项工资薪金是什么
  • 小微企业差旅费可以税前扣除吗
  • 代开票的时候扣了城建税,申报的时候还需要填写吗?
  • 公司买的固定资产还没使用
  • 月中发当月工资是怎么算的
  • 收到货款未发货可以开发票吗
  • 电脑怎么更新系统日期
  • win10玩游戏fps低怎么办
  • 专柜公司货什么意思
  • win10升级win11报错
  • 增值税价外费用如何开票
  • 递延所得税当期要交吗
  • 车辆违章罚款的钱上交到那了
  • 现金支票提取备用金会计处理
  • 购买二手商住房没有给契税发票和购房发票
  • 委托加工物资增值税计税依据
  • php数组按照某个字段排序
  • 预提费用的分录
  • 办公费抵扣标准
  • 前端html模板
  • yii框架教程
  • excel&命令
  • ps一个页面怎么选中画板
  • 应付票据核算的内容
  • 购买的服务怎么做账
  • 利润与所有者权益的区别
  • 公司一般户财务负责人是另一公司法人
  • pythonsorted函数的作用
  • 一般纳税人差额纳税
  • 怎么查电子发票真伪
  • 限额领料单属于什么凭证多选题
  • 专票和普票都是13个点嘛
  • 法人工资应该怎么处理
  • 对外支付代扣代缴税费
  • 出口退税是什么
  • 境外汇款免税
  • 现金预算包括哪些内容,来源是什么
  • 自产商品对外赠送
  • 销售商品的运费的税费计入进项税额
  • 借款合同相关法条
  • 营业利润为负数表示什么
  • 银行存款利息的结算方式
  • 建账的基本步骤
  • mysql5.7.
  • Linux虚拟机下mysql 5.7安装配置方法图文教程
  • 使用u盘安装windows10电脑识别不出来
  • office技术预览版和增强版
  • 如何查看windows2008修改密码日志
  • mac自动操作怎么停止
  • ubuntu做lvm
  • centos如何查看所有用户
  • 任务栏图标右键
  • vc6.0安装教程win8
  • win10系统声音忽大忽小
  • js内存释放
  • bootstrap导航都有哪些
  • Android---61---TabHost简单使用
  • 批处理自动关闭
  • cmd nul
  • unity smooth
  • 商务英语考英语笔译 算跨考吗
  • Python高手之路第3版PDF下载
  • python itcast
  • python快捷键大全
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设