要实现选择待选状态的值时只能选择一个,并在尝试选择第二个时给出提示,你可以修改 handleChange
方法来加入提示信息。具体来说,当用户尝试选择多个项时,可以使用 message.warning
显示一个警告信息,并阻止他们继续选择。
以下是修改后的代码片段:
const handleChange = (nextTargetKeys, direction, moveKeys) => {
if (direction === 'right') {
// 如果是从待选状态移动到已选状态
if (nextTargetKeys.length > 1) {
// 如果尝试选择多个值,显示警告并保留最后一个选中的值
message.warning('只能选择一个标签');
const lastSelectedKey = moveKeys[moveKeys.length - 1];
targetKeys.value = [lastSelectedKey];
} else {
targetKeys.value = nextTargetKeys;
}
} else if (direction === 'left') {
// 如果是从已选状态移回待选状态
targetKeys.value = nextTargetKeys;
}
};
修改后的逻辑说明:
- 在
direction === 'right'
的情况下,检查nextTargetKeys.length
是否大于1。 - 如果是,则通过
message.warning
显示“只能选择一个标签”的提示。 - 同时,依然允许将目标键设置为最近一次移动的键,以确保只留下最新的被选中项。
- 当向左移动(从已选状态到待选状态)时,可以直接更新
targetKeys
。
这样修改后,当用户尝试选择多个标签时,会收到相应的提示,并且只能成功地添加一个标签到已选列表中。
内容由零声教学AI助手提供,问题来源于学员提问