antd的TreeSelect不想让它选中父项,只想让它选子项,点击父项展开子项
时间: 2024-10-16 10:08:19 浏览: 41
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
5星 · 资源好评率100%
在Ant Design (antd) 的 TreeSelect 组件中,如果你想让用户只能选择子项,而不是父项,并且允许用户点击父项展开其子项,你可以通过设置 `treeData` 和 `onSelect` 属性来实现这个需求。
首先,你需要保证 `treeData` 格式包含一个 `children` 字段,表示每个节点是否有子节点。例如:
```jsx
const treeData = [
{
title: '父项1',
key: 'parent1',
children: [
{ title: '子项1', key: 'child1' },
{ title: '子项2', key: 'child2' },
],
},
// 其他父项...
];
// 然后在 onSelect 钩子函数里,只处理子节点的选择
function onSelect(node) {
if (!node.parentKey) { // 如果不是根节点
console.log('选择了子项:', node);
} else {
console.log('展开父项:', node.title);
}
}
```
在这个例子中,当用户点击父项时,会打印出 "展开父项: 父项1",而点击子项时会打印出 "选择了子项: 子项1/2"。`onSelect` 函数检查了 `node.parentKey` 是否存在,如果不存在,则说明选择了子项。
阅读全文