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.
65 lines
1.4 KiB
65 lines
1.4 KiB
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;
|
|
|