AntDesign 表单中a-select对数据进行回显
<a-select
v-model:value="checkedUserLeader"
label-in-value
:show-search="true"
placeholder="请输入"
style="width: 100%"
:filter-option="false"
:not-found-content=" null"
:options="checkedLeadersOpts"
@change="handleCheckChange"
@search="loadCheckLeaders"
>
</a-select>
const checkedLeadersOpts = ref([])
const loadCheckLeaders = debounce( async (val) => {
const res = await getCheckedLeaderInfo({ keyWord: val })
if(isResponseSuccess(res)) {
checkedLeadersOpts.value = res.data.data.map(item => {
return {
...item,
label: `${item.name} - ${item.policeCode} - ${item.deptName}`,
value: item.cardId
}
})
}
}, 350)
const handleCheckChange = (value, option) => {
console.log('output-> {value, option} :::', { value, option })
if (!isEmpty(option)) {
formState.assessmentUnitInfo.assessLeader = option.cardId
formState.assessmentUnitInfo.assessLeaderName = option.name
} else {
formState.assessmentUnitInfo.assessLeader = undefined
formState.assessmentUnitInfo.assessLeaderName = undefined
}
}
const checkedUserLeader = ref(undefined)
onMounted(() => {
checkedUserLeader.value = payload.assessLeaderName // 回显直接赋值(案例)
})
学而不思则罔,思而不学则殆!

浙公网安备 33010602011771号