antd tree 组件 默认选中第一个
时间: 2024-11-14 07:11:17 浏览: 4
antd Tree组件 搜索标红 例子
5星 · 资源好评率100%
Ant Design(antd)是一个为React设计的用于构建用户界面的设计系统。它提供了许多预制的组件,包括树形组件(Tree)。
在Antd的Tree组件中,默认情况下,第一个节点(也就是第一个子节点)通常是默认选中的。这是因为大多数情况下,我们希望用户能够立即看到并操作树结构中的顶部或主要部分。
如果你想要改变这个默认行为,你可以使用`defaultExpandedKeys`属性来指定默认展开的节点。这个属性接受一个节点键数组,你可以使用这个数组来控制默认选中的节点。
以下是一个例子:
```jsx
import { Tree } from 'antd';
const data = [
{
title: '节点1',
key: '0-0',
children: [
{
title: '子节点1',
key: '0-0-0',
},
{
title: '子节点2',
key: '0-0-1',
},
],
},
// 其他节点...
];
const tree = (
<Tree defaultExpandedKeys={['0-0', '0-0-0']} />
);
```
在这个例子中,`defaultExpandedKeys`属性被设置为`['0-0', '0-0-0']`,这意味着默认展开的节点是父节点'0-0'和其子节点'0-0-0'。因此,组件不会默认选中第一个节点,而是默认展开一个特定的节点。你可以根据你的需求调整这个数组。
阅读全文