四、数据展示组件(2)

最新推荐文章于 2024-09-07 16:06:50 发布

谁诉离殇~

最新推荐文章于 2024-09-07 16:06:50 发布

阅读量1.4k

点赞数 1

分类专栏：框架(level 1) # React系列(level 2) # antd(level 3) 文章标签： javascript

本文链接：https://blog.csdn.net/rocktanga/article/details/121328683

版权

本文详细介绍了Ant Design中的Tree组件，包括树形控件的事件、属性及子组件属性，如树节点的拖拽、展开/折叠等交互功能。接着讲解了Tooltip组件，用于文字提示，提供了显示、隐藏回调及多种配置选项。接着是Timeline组件，展示了时间轴的使用场景和样式配置。最后，讨论了Tag标签的用法，包括颜色、关闭功能和多种样式设置。

摘要由CSDN通过智能技术生成

12、Tree树形控件

多层次的结构列表。

何时使用：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

(0)<Tree>组件对应的事件

<1>onCheck事件: 表示选中复选框，或者取消复选框的选中时触发.可选值：无；默认值： -；类型： function(checkedKeys, info:{checked: boolean, checkedNodes, node, event, halfCheckedKeys})

这里的参数和下面的onSelect事件差不多的

<2>onDragEnd事件: 表示dragend 触发时调用.可选值：无；默认值： -；类型： function({event, node})

<3>onDragEnter事件: 表示dragenter 触发时调用.可选值：无；默认值： -；类型： function({event, node, expandedKeys})

<4>onDragLeave事件: 表示dragleave 触发时调用.可选值：无；默认值： -；类型： function({event, node})

<5>onDragOver事件: 表示dragover 触发时调用.可选值：无；默认值： -；类型： function({event, node})

<6>onDragStart事件: 表示开始拖拽时调用.可选值：无；默认值： -；类型： function({event, node})

<7>onDrop事件: 表示drop 触发时调用.可选值：无；默认值： -；类型： function({event, node, dragNode, dragNodesKeys})

<8>onExpand事件: 表示展开/收起节点时触发.可选值：无；默认值： -；类型： function(expandedKeys, info:{expanded: bool, node})

expandedKeys: 所有展开的节点的key值的数组

node: 这个node和下面onSelect事件的node差不多的

<9>onLoad事件: 表示节点加载完毕时触发.可选值：无；默认值： -；类型： function(loadedKeys, {event, node})

<10>onRightClick事件: 表示响应右键点击.可选值：无；默认值： -；类型： function({event, node})

<11>onSelect事件: 表示点击树节点的文本时触发.可选值：无；默认值： -；类型： function(selectedKeys, info:{event, selected: boolean, node, selectedNodes: Array, nativeEvent})

selectedKeys: 被选中的节点的key值的数组。如：["0-0-1"]

info: 关于这次选中的一些信息

event: 表示事件的名称。值 “select”。如果是onCheck事件触发的，值就为 check

selected：表示当前点击的节点是否选中。值 true false

node: 当前点击的节点树的信息。

props: 这个节点的一些属性值。如：props.title,点击的节点的title属性；props.eventKey,点击的节点的key值；props.selected,点击的节点是否被选中；props.expanded,点击的节点是否展开；props.children,点击的节点的子节点数组。

selectedNodes: 被选中的节点的所有信息的数组。每个节点的信息都是一个对象。下面为这个节点对象的一些属性

nativeEvent: 表示普通的event事件，比如可以调用nativeEvent.target这种

(1)<Tree>组件对应属性: 这个Tree组件是外层组件，里层的所有节点都是它的子组件Tree.TreeNode。这个也不能直接作为最外层组件暴露出去，要在外面加个div

<1>autoExpandParent: 表示是否自动展开父节点.可选值：无；默认值： true；类型： boolean。

<2>blockNode: 表示是否节点占据一行.可选值：无；默认值： false；类型： boolean。

<3>checkable: 表示节点前添加 Checkbox 复选框.可选值：无；默认值： false；类型： boolean。

<4>checkedKeys: 表示受控）选中复选框的树节点，选中是指勾选了复选框前面的勾（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联.可选值：无；默认值： []；类型： string[] | {checked: string[], halfChecked: string[]}。

<5>checkStrictly: 表示checkable 状态下节点选择完全受控（父子节点选中状态不再关联）.可选值：无；默认值： false；类型： boolean。

<6>defaultCheckedKeys: 表示默认选中复选框的树节点。这个选中指的是勾选了前面的复选框.可选值：无；默认值： []；类型： string[]。

<7>defaultExpandAll: 表示默认展开所有树节点.可选值：无；默认值： false；类型： boolean。

<8>defaultExpandedKeys: 表示默认展开指定的树节点.可选值：无；默认值： []；类型： string[]。

<9>defaultExpandParent: 表示默认展开父节点.可选值：无；默认值： true；类型： boolean。

<10>defaultSelectedKeys: 表示默认选中的树节点。这个选中值的是选中这个节点.可选值：无；默认值： []；类型： string[]。

<11>disabled: 表示将树禁用.可选值：无；默认值： false；类型： boolean。

<12>draggable: 表示设置节点可拖拽（IE>8）.可选值：无；默认值： false；类型： boolean。

<13>expandedKeys: 表示受控）展开的树节点的keys数组.可选值：无；默认值： []；类型： string[]。

<14>filterTreeNode: 表示按需筛选树节点（高亮），返回 true.可选值：无；默认值： -；类型： function(node)。

<15>loadData: 表示异步加载数据，应该是类似于cascade的loadData.可选值：无；默认值： -；类型： function(node)。

<16>loadedKeys: 表示受控）已经加载的节点，需要配合 loadData 使用.可选值：无；默认值： []；类型： string[]。

<17>multiple: 表示支持点选多个节点（节点本身.可选值：无；默认值： false；类型： boolean。

<18>selectable: 表示是否可选中.可选值：无；默认值： true；类型： boolean。

<19>selectedKeys: 表示受控）选中的树节点的key值数组.可选值：无；默认值： -；类型： string[]。

<20>showIcon: 表示是否展示 TreeNode title 前的图标，没有默认样式，需要在Tree.TreeNode上面设置Icon.可选值：无；默认值： false；类型： boolean。

<21>switcherIcon: 表示自定义树节点的展开/折叠图标。即那个箭头图标.可选值：无；默认值： -；类型： React.ReactElement。

<22>showLine: 表示修改树的样式，这个和上面的showIcon一起用，好像是会出问题的。是否展示同层级节点的连接线；为true，则相同层级的节点直接会连上一条线.可选值：无；默认值： false；类型： boolean。

<23>treeData: 表示treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一.可选值：无；默认值： -；类型： array<{key, title, children, [disabled, selectable]}>。

(2)<Tree>的子组件<Tree.TreeNode>树的节点对应属性: 这个就是Tree组件里面的每个节点。要进行节点嵌套，就直接在 Tree.TreeNode里面嵌套Tree.TreeNode

<1>checkable: 表示当树为 checkable 时，设置独立节点是否展示 Checkbox.可选值：无；默认值： -；类型： boolean。

<2>disableCheckbox: 表示只禁用节点的checkbox。禁用后节点可以被选中.可选值：无；默认值： false；类型： boolean。

<3>disabled: 表示禁用节点。禁用后节点不能被选中，也不能点击前面的checkbox.可选值：无；默认值： false；类型： boolean。

<4>icon: 表示自定义节点前面的那个图标。可接收组件，props 为当前节点 props.可选值：无；默认值： -；类型： ReactNode/Function(props):ReactNode。

<5>isLeaf: 表示设置为叶子节点(设置了loadData时有效.可选值：无；默认值： false；类型： boolean。

<6>key: 表示节点的key值。被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复.可选值：无；默认值：内部计算出的节点位置；类型： string。

关于节点上key值的设置：比如第一层的第一个节点key值设置为0-0，第一层的第二个节点设置为0-1；第一层的第一个节点的第一个子节点设置为0-0-0，第一层的第一个节点的第二个子节点设置为0-0-1

<7>selectable: 表示设置节点是否可被选中.可选值：无；默认值： true；类型： boolean。

<8>title: 表示节点的具体标题，即节点对应的内容.可选值：无；默认值： ‘—’；类型： string|ReactNode。

(3)<Tree>的子组件<Tree.DirectoryTree>文件目录树对应属性:这个组件是用来替换Tree组件的，里面还是用来包含 Tree.TreeNode；与Tree组件的差别是，这个组件层级节点的样式前面有一个文件夹小图标

<1>expandAction: 表示目录展开逻辑.可选值：false ‘click’ ‘doubleClick’；默认值： click；类型： string。

import React, { PureComponent } from 'react';
import { Tree, Button, Icon, Tooltip } from 'antd';
import moment from 'moment';
const {TreeNode} = Tree;
class demo extends PureComponent {
  onSelect(selectedKeys, info) {};
  onCheck(checkedKeys, info) {};
  onExpand(expandedKeys, info) {};
  render() {return (<div><Tree// checkableautoExpandParent={false}draggableshowIcon={true}// showLinedefaultExpandedKeys={['0-0-0-0', '0-0-1']}defaultSelectedKeys={['0-0-0-0', '0-0-1']}defaultCheckedKeys={['0-0-0-0', '0-0-1']}
        onSelect={(selectedKeys, info) => {this.onSelect(selectedKeys, info)}}onCheck={(selectedKeys, info) =