The el-form form submission in element will have different rulus verification according to different conditions

<el-form
	ref="form"
	inline
	:model="billDetailCopy"
	:rules="rules"
	size="small"
	label-position="right"
	label-width="110px">
 <el-form-item
 	v-for="(item,index) in listFilter"
 	:key="index"
 	:prop="item.key"
 	:label="item.label" >
      <el-input
        style="width: 200px"
        :maxlength="item.key === 'billingNo' ? 12 : item.key === 'billingCode' ? 8 : ''"
        v-model="billDetailCopy[item.key]"
        :placeholder="item.placeholder"
      >
      </el-input>
    </el-form-item>
   </el-row>
</el-form>



 handleClick(name) {
        if (name === '增值税专用发票') {
          this.$set(this.rules, 'feeWithoutTax', [{ required: true, trigger: 'change',validator: validateAmount }])
          this.$set(this.rules, 'tax', [{ required:true, trigger: 'blur', validator: validateAmount } ])
        } else {
          this.$delete(this.rules, 'feeWithoutTax')
          this.$delete(this.rules, 'tax')
        }
        this.handleReset()
 },
 handleReset() {
 	// 为什么使用 nextTick,因为页面的数据是会随时改变的,在computed监听了页面渲染的数据,所以他们的执行顺序是  handleClick ---》handleReset---〉computed 所以每次重置页面都是有提示,
  this.$nextTick(() => {
    this.$refs['form'].clearValidate();
    this.$refs['form'].resetFields();
  })
},

The two check fields are different

insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/qq_43631129/article/details/131478563