You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.4 KiB
66 lines
1.4 KiB
2 years ago
|
import React, { useState } from 'react';
|
||
|
import { Space, Switch, TreeSelect } from 'antd';
|
||
|
|
||
|
const treeData = [
|
||
|
{
|
||
|
value: 'parent 1',
|
||
|
title: 'parent 1',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'parent 1-0',
|
||
|
title: 'parent 1-0',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'leaf1',
|
||
|
title: 'leaf1',
|
||
|
},
|
||
|
{
|
||
|
value: 'leaf2',
|
||
|
title: 'leaf2',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
value: 'parent 1-1',
|
||
|
title: 'parent 1-1',
|
||
|
children: [
|
||
|
{
|
||
|
value: 'sss',
|
||
|
title: 'sss',
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [treeLine, setTreeLine] = useState(true);
|
||
|
const [showLeafIcon, setShowLeafIcon] = useState(false);
|
||
|
|
||
|
return (
|
||
|
<Space direction="vertical">
|
||
|
<Switch
|
||
|
checkedChildren="treeLine"
|
||
|
unCheckedChildren="treeLine"
|
||
|
checked={treeLine}
|
||
|
onChange={() => setTreeLine(!treeLine)}
|
||
|
/>
|
||
|
<Switch
|
||
|
disabled={!treeLine}
|
||
|
checkedChildren="showLeafIcon"
|
||
|
unCheckedChildren="showLeafIcon"
|
||
|
checked={showLeafIcon}
|
||
|
onChange={() => setShowLeafIcon(!showLeafIcon)}
|
||
|
/>
|
||
|
<TreeSelect
|
||
|
treeLine={treeLine && { showLeafIcon }}
|
||
|
style={{ width: 300 }}
|
||
|
treeData={treeData}
|
||
|
/>
|
||
|
</Space>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|