antd treeselect组件绑定value值没有显示title的值
时间: 2024-01-11 15:04:31 浏览: 14
如果您想要在 `TreeSelect` 组件中绑定 `value` 值时,同时显示 `title` 值,可以使用 `treeDataSimpleMode` 属性。
首先,您需要将 `TreeSelect` 组件的 `treeData` 数据转换为简单模式,即每个节点只包含 `id`、`pId`、`value` 和 `title` 四个属性。例如:
```
const treeData = [
{
id: '1',
pId: '0',
value: '1',
title: 'Node 1',
children: [
{
id: '11',
pId: '1',
value: '11',
title: 'Node 1-1',
},
{
id: '12',
pId: '1',
value: '12',
title: 'Node 1-2',
},
],
},
{
id: '2',
pId: '0',
value: '2',
title: 'Node 2',
},
];
```
然后,您需要在 `TreeSelect` 组件中设置 `treeDataSimpleMode` 属性,并将 `value` 和 `title` 的属性名分别设置为 `value` 和 `title`。例如:
```
<TreeSelect
treeData={treeData}
treeDataSimpleMode={{
id: 'id',
pId: 'pId',
value: 'value',
title: 'title',
}}
value={selectedValue}
onChange={handleChange}
/>
```
这样,当您选中某个节点时,`TreeSelect` 组件会将该节点的 `value` 值作为 `value` 属性的值,将该节点的 `title` 值作为显示的文本。