要在 Vue 组件中实现仅允许选择一个多选框，并在尝试选择第二个时弹出提示，你可以对 handleChange 函数进行修改。具体而言，当用户尝试将第二个项目移到已选状态时，我们可以使用 message 提示用户，并阻止该操作。以下是修改后的代码片段：
const handleChange = (nextTargetKeys, direction, moveKeys) => {
if (direction === 'right') {
// 如果是从待选状态移动到已选状态
if (nextTargetKeys.length > 1) {
// 弹出提示，不能选择多个值
message.warning('只能选择一个标签');
return; // 阻止后续的更新
}
// 如果只选择了一个值，正常更新
targetKeys.value = nextTargetKeys;
} else if (direction === 'left') {
// 如果是从已选状态移回待选状态
targetKeys.value = nextTargetKeys;
}
};
完整组件的调整
在完整组件中，只需替换掉原有的 handleChange 方法即可。
功能说明
- 当用户尝试将第二个标签移动到已选列表时，会出现警告消息“只能选择一个标签”，并且不再更新
targetKeys的值。 - 如果只选择了一个标签，则正常执行更新。
注意事项
确保你的 ant-design-vue 库中已经导入了 message，这样才能正常弹出提示信息。
通过这样的方式，可以有效控制用户交互，保证符合业务需求。
内容由零声教学AI助手提供，问题来源于学员提问
![if (item.code === loan'){
for(const loan of item.child){const Index= loan.path.split('.')[1]let contractCode;
me.overDueInfoIndexloan.pathl=Index
const child overduePeriod = loan.child.find(val =>val.code ===](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162214111445370.png)
![[E/kernel.sched] thread:tidle0 stack overflow](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162232254655144.png)
