mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
8404db403a
* feat: tree-select edit demo to data driven * feat: update for lint
83 lines
1.5 KiB
Markdown
83 lines
1.5 KiB
Markdown
---
|
|
order: 6
|
|
title:
|
|
zh-CN: 线性样式
|
|
en-US: Show Tree Line
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
通过 `treeLine` 配置线性样式。
|
|
|
|
## en-US
|
|
|
|
Use `treeLine` to show the line style.
|
|
|
|
```tsx
|
|
import { Space, Switch, TreeSelect } from 'antd';
|
|
import React, { useState } from 'react';
|
|
|
|
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;
|
|
```
|