[elementuiPlus]el-select改变时触发el-input校验的解决方法

场景：如上图所示，当数据库角色为 Primary 时，同步关系和同步模式禁用；当数据库角色改变时，同步模式和同步关系可编辑，同时同步关系和同步模式还要有必填校验；

情况1：由于新建和编辑共用一个弹层，当先打开的是编辑弹层，会回显所有表单数据，修改数据库角色时，就需要清空同步模式和同步关系的值，再给这两加上必填校验；
解决：动态绑定prop的值，以此来控制是否有必填校验；

情况2：就是当改变数据库角色，清空同步模式和同步关系的值时，同步关系会自动触发必填校验，这就是标题所描述的：改变某个el-select时会触发相关联的el-input必填校验；
解决：手动清除同步关系的校验即可；属性clearValidate()是清除表单内所有校验，而想要清除单个的某个校验:clearValidate('prop名')

<el-form ref="ruleFormEl" :rules="rules">
<el-form-item label="数据库角色" prop="dbRole">
	<el-select
	  v-model="formModel.dbRole"
	  filterable
	  placeholder="请选择数据库角色"
	  @change="changeRole"
	>
		<el-option
		  v-for="item in roleArr"
		  :key="item.key"
		  :label="item.value"
		  :value="item.key"
		/>
	</el-select>
</el-form-item>
<el-form-item label="同步模式" :prop="isSync ? '' : 'syncMode'">
	<el-select
	  v-model="formModel.syncMode"
	  filterable
	  placeholder="请选择同步模式"
	  :disabled="isSync"
	>
		<el-option
		  v-for="item in syscModeArr"
		  :key="item.key"
		  :label="item.value"
		  :value="item.key"
		/>
	</el-select>
</el-form-item>
<el-form-item label="同步关系" :prop="isSync ? '' : 'syncId'">
	<el-input 
	  v-model="formModel.syncId" 
	  placeholder="请输入同步关系"
	  :disabled="isSync"
	>
	</el-input>
</el-form-item>

<script setup lang="ts">
import { ref } from 'vue'
let formModel = ref({
	dbRole: '',
	syncMode: '',
	syncId: ''
})

// 表单校验规则
const rules = {
	dbRoles: [{ required: true, message: "请选择数据库角色", trigger: "change" }],
	syncMode: [{ required: true, message: "请选择同步模式", trigger: "change" }],
	syncId: [{ required: true, message: "请输入同步关系", trigger: "blur" }]
}

let isSync = ref(false)

// 改变角色
const changeRole = (val) => {
	// 清空同步关系和同步模式 
	formModel.value.syncId = ''
    formModel.value.syncMode = ''
    // 单独清除同步关系的校验
    ruleFormRef.value.clearValidate(['syncId']) 
	// 此处是同步关系和同步模式是否有必填校验
	if(val === 'primary') {
		isSync.value = true
	}else {
		isSync.value = false
	}
	console.log(val, 'val')
}
</script>