1.问题:切换按钮时,两个校验都需要进行
此时用到了对象添加属性https://cn.vuejs.org/v2/api/#vm-set里面的

Vue.set( target, propertyName/index, value )
Vue.delete( target, propertyName/index, value )

2.参数

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值:设置的值。
3.用法
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
4.解读
由于 vue 无法对对象下的属性深度监听,并触发视图的变化。会导致对象已改变,但是视图界面上并没有更新的情况。
vue 在vm实例上提供了 $set方法,用于监听属性变化并更新视图。
5.使用

vm.$set(目标对象, 属性名/索引, 新值)
或this.$set(目标对象, 属性名/索引, 新值)
vm为vue实例,this指向vm

6.示例
有时候使用this.$set也不起作用,是因为target目标不正确。
比如:

let dataList = [{
	isShow:false,
	subList:[{
		id: 1
	}]
}];
this.$set(this.dataList, index, this.dataList[index]);

项目原型

 data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("阈值不能为空"));
      }
      setTimeout(() => {
        if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
  rules: {
        region: [{ required: true, message: "请选择项目", trigger: "change" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请选择版本号",
            trigger: "change"
          }
        ],
        name: [{ required: true, validator: checkName, trigger: "blur" }],
        singgle: [
          {
            type: "array",
            required: true,
            message: "请选择至少一个属性",
            trigger: "change"
          }
        ]
      }
      }

change事件

<el-form-item label="阈值分类" prop="kind">
          <el-radio-group v-model="form.kind" @change="agreeChange">
            <el-radio label="单阈值统计"></el-radio>
            <el-radio label="多阈值统计"></el-radio>
          </el-radio-group>
        </el-form-item>
 agreeChange() {
        this.$refs["form"].clearValidate();
        var checkLimit = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("阈值区间不能为空"));
            }
            setTimeout(() => {
                if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
                callback(new Error("请输入数字值"));
                } else {
                callback();
                }
            }, 1000);
            };
        var checkLimits = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("阈值区间不能为空"));
            }
            setTimeout(() => {
                if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
                    callback(new Error("请输入数字值"));
                } else if(value<=this.form.limit){
                    callback(new Error("请输入有效值"));
                } else{
                  callback();
                }
            }, 1000);
        };
        var checkStep = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("步长不能为空"));
            }
            setTimeout(() => {
                if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
                callback(new Error("请输入数字值"));
                } else if(value>this.form.limits-this.form.limit){
                    callback(new Error("请输入有效值"));
                } else {
                callback();
                }
            }, 1000);
        };

      
      if (this.form.kind == "单阈值统计") {
            this.$delete(this.rules, "limit", [
            { validator: checkLimit, trigger: "blur" }
            ]);
            this.$delete(this.rules, "limits", [
            { validator: checkLimits, trigger: "blur" }
            ]);
            this.$delete(this.rules, "step", [
            { validator: checkStep, trigger: "blur" }
            ]);
      } else {
            this.$set(this.rules, "limit", [
            { validator: checkLimit, trigger: "blur" }
            ]);
            this.$set(this.rules, "limits", [
            { validator: checkLimits, trigger: "blur" }
            ]);
            this.$set(this.rules, "step", [
            { validator: checkStep, trigger: "blur" }
            ]);

      }
    },

参考1
参考2

修改未点击直接校验

   if (this.form.kind == "单阈值统计") {
          delete this.rules.limit;
          delete this.rules.limits;
          delete this.rules.step;
            // this.$delete(this.rules, "limit", [
            // { validator: checkLimit, trigger: "blur" }
            // ]);
            // this.$delete(this.rules, "limits", [
            // { validator: checkLimits, trigger: "blur" }
            // ]);
            // this.$delete(this.rules, "step", [
            // { validator: checkStep, trigger: "blur" }
            // ]);
         
      } else {
           this.rules.limit={ validator: checkLimit, trigger: "blur" }
          this.rules.limits={ validator: checkLimits, trigger: "blur" }
          this.rules.step={ validator: checkStep, trigger: "blur" }

          //未点击就出来校验
            // this.$set(this.rules, "limit", [
            // { validator: checkLimit, trigger: "blur" }
            // ]);
            // this.$set(this.rules, "limits", [
            // { validator: checkLimits, trigger: "blur" }
            // ]);
            // this.$set(this.rules, "step", [
            // { validator: checkStep, trigger: "blur" }
            // ]);

      }
Logo

前往低代码交流专区

更多推荐