--- order: 5 title: zh-CN: 连接线 en-US: Tree with line --- ## zh-CN 节点之间带连接线的树,常用于文件目录结构展示。使用 `showLine` 开启,可以用 `switcherIcon` 修改默认图标。 ## en-US Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`. ```tsx import React, { useState } from 'react'; import { Tree, Switch } from 'antd'; import { CarryOutOutlined, FormOutlined } from '@ant-design/icons'; const treeData = [ { title: 'parent 1', key: '0-0', icon: <CarryOutOutlined />, children: [ { title: 'parent 1-0', key: '0-0-0', icon: <CarryOutOutlined />, children: [ { title: 'leaf', key: '0-0-0-0', icon: <CarryOutOutlined /> }, { title: ( <> <div>multiple line title</div> <div>multiple line title</div> </> ), key: '0-0-0-1', icon: <CarryOutOutlined />, }, { title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> }, ], }, { title: 'parent 1-1', key: '0-0-1', icon: <CarryOutOutlined />, children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }], }, { title: 'parent 1-2', key: '0-0-2', icon: <CarryOutOutlined />, children: [ { title: 'leaf', key: '0-0-2-0', icon: <CarryOutOutlined /> }, { title: 'leaf', key: '0-0-2-1', icon: <CarryOutOutlined />, switcherIcon: <FormOutlined />, }, ], }, ], }, { title: 'parent 2', key: '0-1', icon: <CarryOutOutlined />, children: [ { title: 'parent 2-0', key: '0-1-0', icon: <CarryOutOutlined />, children: [ { title: 'leaf', key: '0-1-0-0', icon: <CarryOutOutlined /> }, { title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> }, ], }, ], }, ]; const Demo: React.FC<{}> = () => { const [showLine, setShowLine] = useState(true); const [showIcon, setShowIcon] = useState(false); const [showLeafIcon, setShowLeafIcon] = useState(true); const onSelect = (selectedKeys, info) => { console.log('selected', selectedKeys, info); }; const onSetLeafIcon = checked => { setShowLeafIcon(checked); setShowLine({ showLeafIcon: checked }); }; const onSetShowLine = checked => { if (checked) { showLeafIcon ? setShowLine(checked) : setShowLine({ showLeafIcon }); } else { setShowLine(checked); } }; return ( <div> <div style={{ marginBottom: 16 }}> showLine: <Switch checked={showLine} onChange={onSetShowLine} /> <br /> <br /> showIcon: <Switch checked={showIcon} onChange={setShowIcon} /> <br /> <br /> showLeafIcon: <Switch checked={showLeafIcon} onChange={onSetLeafIcon} /> </div> <Tree showLine={showLine} showIcon={showIcon} defaultExpandedKeys={['0-0-0']} onSelect={onSelect} treeData={treeData} /> </div> ); }; ReactDOM.render(<Demo />, mountNode); ```