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

先看需求：（不想看的直接拉到最后）
vue2：elementUI中Form 表单在特定情况下做动态rules添加删除

【需求说明】

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

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

上代码：

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

      
        其他字段......

表单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二更一个最新的方法：

感谢我的好同事教我做事哈哈哈

:rules=”commodityForm.status == 1 ? { required: true, message: ‘请输入库存’, trigger: [‘blur’,’change’]} : {}”

同时方法中的代码留一个：

   switchChange(e) {
       if(e != 1) {
        this.$refs["commodityForm"].clearValidate(["stock"]);
       }
    }

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/ce0a38f46c.html

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

相关推荐