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

  • 房地产开发公司组织架构
  • 土地取得方式有哪些
  • 税局退回附加税账务处理办法
  • 向职工支付困难证明材料
  • 企业可以申请专项债券吗
  • 坏账准备和信用账户区别
  • 商业汇票到期没有收到款
  • 水利建设基金一定要交吗
  • 小规模纳税人租金发票开几个点
  • 现金流量怎么影响股票价值
  • 交社保不发工资怎么办
  • 厂房房产税如何计算
  • 个人开的专票也能抵扣吗
  • 开外管证再省外预缴税收要怎么报税?
  • 金税盘技术服务费可以全额抵扣吗
  • 行政单位发放的政府补贴款
  • 托收承付是收到钱了吗
  • 委托代销收取手续费账务处理
  • 购买座机计入哪个科目?
  • 咨询服务费属于什么会计科目
  • 建筑公司亏损异常怎么办
  • 视频制作费属于劳务费吗
  • 成本票和费用票分别是什么
  • 小规模纳税人应交增值税科目设置
  • 个人承包劳务合法吗?
  • 筹建期可以有收入吗
  • 现金短缺或溢余的账务处理业务题
  • 管理不善存货损失 企业所得税
  • 公司采购商品支付货款未开票会计分录
  • 客户扣款会计分录明细科目
  • 未取得房产证的房子如何迁户口
  • 机打发票怎么申请流程
  • 餐饮充值赠送
  • windows4月更新
  • 预计负债账务处理会计分录
  • 公司欠法人钱
  • 笔记本cpu天梯图苹果
  • php中的函数可以分为哪几种
  • php字符串变量
  • 应交增值税减免税款包括什么
  • numba报错
  • 商誉减值后
  • 本月增加的无形资产数量
  • detr训练自己的数据集
  • lxml&xpath一站式教学
  • php读写xml
  • python3.9怎么清屏
  • 年末应交税费怎么算
  • 收客户样品费怎么做分录
  • Sql Server 2005的1433端口打开局域网访问和进行远程连接
  • 劳务派遣公司开票内容写什么
  • 单位购买的化妆品怎么用
  • 出租机械设备
  • 专项应付款和政府补助的区别
  • 2013年11号公告企业政策性搬迁
  • 无法收回的款项
  • 债务转为股份的协议
  • 不动产初始登记证明
  • 企业大股东减持股权
  • 独立核算的单位是什么意思
  • 现金流量表的编制基础是权责发生制
  • 公司自建的房子能买吗
  • windows组合快捷键
  • win10和os x el capitan分屏操作对比视频
  • IIS7在Windows Server 2008R2的新改进
  • mac快速关闭所有窗口
  • unix vi命令
  • 产品密钥需要购买吗
  • node.js使用教程
  • java中初始化顺序
  • 梦见擦窗户框
  • linux的sed -i
  • 使用筷子就餐会不会传染乙肝病毒
  • python条件怎么算合法
  • js为什么不能用var定义变量
  • js如何判断输入输出
  • node express 路由
  • 小规模纳税人忘记作废发票导致超过免税范围
  • 学校 税务登记
  • 税务意识形态工作主要内容有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设