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 // 回显直接赋值(案例)
})
posted @ 2025-03-14 16:10  Felix_Openmind  阅读(197)  评论(0)    收藏  举报
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}