Element表单动态控制是否必填

978 阅读1分钟

问题:有四种发票类型,当类型为纸质专票时,可以不输入校验码,其他三种情况都必须输入校验码。

 

解决方式:动态控制表单的rules

代码:

...

<!--            纸质专票无需输入校验码-->
<el-form-item
  label="校验码后六位"
  prop="checkCode"
  :rules="invoiceInfo.invoiceType == 2 ? [{required: false}]:rules.checkCode"
>
  <el-input
    v-model="invoiceInfo.checkCode"
    autocomplete="off"
    placeholder="请输入校验码后六位"
  >
  </el-input>
</el-form-item>


...

data() {
  return {
    rules: {
      checkCode: [
        {required: true, message: '请输入校验码后六位', trigger: 'blur'}
      ],
    }
  }
}


核心代码:

:rules="invoiceInfo.invoiceType == 2 ? [{required: false}]:rules.checkCode"


根据invoiceInfo.invoiceType的值,改变使用的rules;

页面效果:切换成纸质专票,小红点消失了。