computed实现简单的动态表单校验_js computed动态控制v-for input 的rules

有的业务会遇到表单的部分字段在特定的情况下发生校验，例如在下面的场景，当你选择了计量单位的时候，重量是必填的，但是不选择计量单位的时候，重量不是必填项，这个时候我们可以用computed来写校验规则：

     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm" :validate-on-rule-change="false">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位：">
              <el-select size="small" v-model="ruleForm.unitId" placeholder="请选择计量单位">
                <el-option
                    v-for="item in matUnits"
                    :label="item.unitName"
                    :key="item.unitId"
                    :value="item.unitId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重量：" prop='meterWeight'>
              <el-input size="small" v-model.number="ruleForm.meterWeight" placeholder="请输入重量"  @input="change($event)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

 computed:{
    rules(){
      return {
        meterWeight: [
          {required: this.ruleForm.unitId ? true : false, message: '请填写重量！', trigger: 'blur' }
        ],
      }
    }
  },

 但是要注意，el-form有个validate-on-rule-change属性默认是true，每一次rules发生变化的时候都会触发一次验证，如果不是业务需要，可以将它设置为false，在提交的时候统一触发校验。

以上，以后遇到这样的业务，就可以使用computed实现简单的表单的动态校验了。