vue3 置空a-select数据

置空a-select数据

项目中遇到需求，选择第一个下拉框后，发请求获取数据第二个下拉框数据（第二个下拉框已选的情况下需要置空）。

解决方法：formData.value.checkUser = {value: “” ,label:“”}

<a-col :span="12">
	<a-form-item label="中队：" name="checkUserOrgId">
		<a-select v-model:value="formData.checkUserOrgId" placeholder="请选择中队" show-search label-in-value
			option-filter-prop='label' :options="zhongduiOption" @change="zhongduiOptionsChange" allow-clear>
		</a-select>
	</a-form-item>
</a-col>
<a-col :span="12">
	<a-form-item label="街道审核人员：" name="checkUser">
		<a-select v-model:value="formData.checkUser" placeholder="请选择街道审核人员" show-search label-in-value
			option-filter-prop='label' :options="streetUserOption" allow-clear>
		</a-select>
	</a-form-item>
</a-col>
。。。
//中队option选择
const zhongduiOptionsChange = (val) => {
	searchFormState.checkUserOrgId = val
	formData.value.checkUser = { value: "" ,label:""}
	getUserList(val)//调接口获取街道审核人员数据
}

注：刚开始用formData.value.checkUser = ‘’ 报错

Warning: value should in shape of { value: string | number, label?: any } when you set labelInValue to true

当你将 labelInValue 属性设置为 true 时，Select 组件要求你的选项值必须是一个对象，且包含 value 和可选的 label 两个属性。

改成 formData.value.checkUser = { value: “” ,label:“”} 就不报错了。