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

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;