treeselect 多选回显
时间: 2023-07-28 20:09:55 浏览: 185
如果你使用的是 Ant Design 的 `TreeSelect` 组件,可以通过设置 `value` 属性来实现多选回显。`value` 属性需要传入一个数组,数组中的元素对应已经选中的节点的 `value` 值。
例如,下面的代码演示了一个简单的 `TreeSelect` 组件,其中 `value` 属性设置为 `['0-0-0', '0-0-1']`,表示默认选中两个节点:
```jsx
import { TreeSelect } from 'antd';
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
{
title: 'Child Node2',
value: '0-0-1',
key: '0-0-1',
},
],
},
];
function onChange(value) {
console.log(value);
}
function Demo() {
return (
<TreeSelect
treeData={treeData}
value={['0-0-0', '0-0-1']}
onChange={onChange}
treeCheckable={true}
showCheckedStrategy={TreeSelect.SHOW_PARENT}
placeholder="Please select"
style={{ width: 300 }}
/>
);
}
export default Demo;
```
在上述代码中,`treeCheckable` 设置为 `true`,表示可多选,`showCheckedStrategy` 设置为 `TreeSelect.SHOW_PARENT`,表示显示父节点的选中状态。你可以根据实际需求来调整这两个属性的值。
阅读全文