vue3 elemet-plus中表单验证修改required，导致校验字段全部出现

前言：踩过的小坑，而且发现网上解决这个问题的几乎没有

问题：有一个需求：

享受优惠政策的时候，优惠政策类型必选，并且校验；

不享受的时候 ，优惠政策不必选；并且不校验

因为我这里用了表单校验，用了rules，所以有些操作不好操作

 解决方案：

---------------------------------------------------------------------------

 全部代码如下：

<template>:

<el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12" class="mb20">
    <el-form-item label-width="150px" label="享受优惠政策" prop="xsyhzc">
        <el-radio-group v-model="state.ruleForm.xsyhzc" @change="chooseSale">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="0" size="large">否</el-radio>
        </el-radio-group>
    </el-form-item>
</el-col>
<el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12" class="mb20">
    <el-form-item label-width="150px" label="优惠政策类型" prop="yhzclx">
        <el-select 
        class="inputWidth" 
        :disabled="state.flagYHZCLX" 
        v-model="state.ruleForm.yhzclx" 
        placeholder="请选择"
        @change="clearYHZCLXVali"
        >
            <el-option v-for="item in state.optionYHZCLX" :key="item.code" :label="item.label" :value="item.code" />
        </el-select>
    </el-form-item>
</el-col>

< script>:

 //选择是否享受优惠类型
  const chooseSale=()=>{
	if(state.ruleForm.xsyhzc==='1'){
		state.flagYHZCLX=false
	}
	else{
		state.flagYHZCLX=true
		state.ruleForm.yhzclx = null
	}
	rules.yhzclx[0].required = !state.flagYHZCLX
	clearValidate()
  }

  // 清除全部验证
const clearValidate = (): void => {
	setTimeout(() => {
		formEl.value?.clearValidate();
	}, 30);
};

//选择优惠政策之后清除验证
  const clearYHZCLXVali = ()=>{
	formEl.value?.clearValidate('yhzclx')
  }



//初始化，一进来先判断是否享有优惠政策类型，因为我变量里默认定义state.flagYHZCLX为true
if(state.ruleForm.xsyhzc==='1'){
	state.flagYHZCLX = false
	rules.yhzclx[0].required = !state.flagYHZCLX
	clearValidate()
}

关于rules.yhzclx[0].required飘红问题，像下面这样写就可以解决了：

(rules.yhzclx as Array<FormItemRule>)[0].required = !state.flagYHZCLX