--- 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'; import type { DataNode } from 'antd/lib/tree'; const treeData: DataNode[] = [ { title: 'parent 1', key: '0-0', icon: , children: [ { title: 'parent 1-0', key: '0-0-0', icon: , children: [ { title: 'leaf', key: '0-0-0-0', icon: }, { title: ( <>
multiple line title
multiple line title
), key: '0-0-0-1', icon: , }, { title: 'leaf', key: '0-0-0-2', icon: }, ], }, { title: 'parent 1-1', key: '0-0-1', icon: , children: [{ title: 'leaf', key: '0-0-1-0', icon: }], }, { title: 'parent 1-2', key: '0-0-2', icon: , children: [ { title: 'leaf', key: '0-0-2-0', icon: }, { title: 'leaf', key: '0-0-2-1', icon: , switcherIcon: , }, ], }, ], }, { title: 'parent 2', key: '0-1', icon: , children: [ { title: 'parent 2-0', key: '0-1-0', icon: , children: [ { title: 'leaf', key: '0-1-0-0', icon: }, { title: 'leaf', key: '0-1-0-1', icon: }, ], }, ], }, ]; const App: React.FC = () => { const [showLine, setShowLine] = useState(true); const [showIcon, setShowIcon] = useState(false); const [showLeafIcon, setShowLeafIcon] = useState(true); const onSelect = (selectedKeys: React.Key[], info: any) => { console.log('selected', selectedKeys, info); }; const onSetLeafIcon = (checked: boolean) => { setShowLeafIcon(checked); setShowLine({ showLeafIcon: checked }); }; const onSetShowLine = (checked: boolean) => { setShowLine(checked ? { showLeafIcon } : false); }; return (
showLine:

showIcon:

showLeafIcon:
); }; export default App; ```