四、数据展示组件(2)

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) => {this.onCheck(selectedKeys, info)}}onExpand={(expandedKeys, info) => {this.onExpand(expandedKeys, info)}}>
        <TreeNode icon={<Icon type="carry-out" />} title="parent 1111111111111" key="0-0" ><TreeNode icon={<Icon type="smile-o" />} title="parent 1-0111111111111" key="0-0-0"><TreeNode icon={<Icon type="carry-out" />} title="leaf1" key="0-0-0-0"/><TreeNode icon={<Icon type="carry-out" />} title="leaf2" key="0-0-0-1" /></TreeNode>
    <TreeNode title="parent 1-1" key="0-0-1" switcherIcon={<Icon type="form" />}><TreeNode  switcherIcon={<Icon type="form" />} title={<span style={
   
   { color: '#1890ff' }}>sss</span>} key="0-0-1-0" /></TreeNode></TreeNode></Tree></div>);}
};
export default demo;

13、Tooltip文字提示

简单的文字提示气泡框。就是点击一个文字，在上次出现一个黑色的提示框。和Popover、Popconfirm比较相似，不过Popover、Popconfirm这两个组件里面的东西都要多一点，Tooltip里面只有一个title

何时使用：鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
可用来代替系统默认的 title 提示，提供一个按钮/文字/操作的文案解释。

(0)<Popover><Tooltip><Popconfirm>组件共享的对应的事件

<1>onVisibleChange事件: 表示弹出框显示，或者弹出框隐藏的回调.可选值：无；默认值： -；类型： (visible) => void。

(1)<Tooltip>组件对应属性: ToolTip组件可以包含其它的组件，其它的组件会显示在页面上

<1>title: 表示提示文字.可选值：无；默认值： -；类型： string|ReactNode|() => ReactNode。

(2)<Popover><Tooltip><Popconfirm>组件共享的对应属性:

<1>arrowPointAtCenter: 表示箭头是否指向目标元素中心，[email protected]+ 支持.可选值：无；默认值： false；类型： boolean。

<2>autoAdjustOverflow: 表示气泡被遮挡时自动调整位置.可选值：无；默认值： true；类型： boolean。

<3>defaultVisible: 表示默认是否显隐.可选值：无；默认值： false；类型： boolean。

<4>getPopupContainer: 表示浮层渲染父节点，默认渲染到 body 上.可选值：无；默认值： () => document.body；类型： Function(triggerNode)。

<5>mouseEnterDelay: 表示鼠标移入后延时多少才显示 Tooltip，单位：秒.可选值：无；默认值： 0.1；类型： number。

<6>mouseLeaveDelay: 表示鼠标移出后延时多少才隐藏 Tooltip，单位：秒.可选值：无；默认值： 0.1；类型： number。

<7>overlayClassName: 表示卡片类名.可选值：无；默认值： -；类型： string。

<8>overlayStyle: 表示卡片样式.可选值：无；默认值： -；类型： object。

<9>placement: 表示气泡框位置.可选值：top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom；默认值： top；类型： string。

<10>trigger: 表示触发弹出的事件.可选值：hover/focus/click/contextMenu；默认值： hover；类型： string。

<11>visible: 表示用于手动控制浮层显隐.可选值：无；默认值： false；类型： boolean。

<12>align: 表示该值将合并到 placement 的配置中，设置参考 rc-tooltip.可选值：无；默认值： -；类型： Object。

import React, { PureComponent } from 'react';
import { Row, Col, Button, Tooltip } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {return (<Tooltip placement="topLeft" title="prompt text" arrowPointAtCenter trigger={'click'}><span>Tooltip will show on mouse enter.</span></Tooltip>);
  }
};
export default demo;

14、Timeline时间轴

垂直展示的时间流信息。

何时使用：<1>当有一系列信息需按时间排列时，可正序和倒序。<2>需要有一条时间轴进行视觉上的串联时。

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

<1>事件: 表示.可选值：无；默认值： -；类型：

(1)<Timeline>组件对应属性:

<1>pending: 表示在Timeline.Item组件的最后，在添加一个Timeline.Item节点；但是这个节点的样式为一直转圈圈的虚线，节点的内容就为这个pending的值；pending为boolean，则节点只有一个圈圈没有内容.可选值：无；默认值： false；类型： boolean|string|ReactNode。

<2>pendingDot: 表示当最后一个幽灵节点存在時，指定其时间图点.可选值：无；默认值： <Icon type="loading" />；类型： string|ReactNode。

<3>reverse: 表示是否倒叙。为true则代码中最后的Timeline.Item组件在最前面.可选值：无；默认值： false；类型： boolean。

<4>mode: 表示设置时间轴的圈圈和时间轴的内容，的相对位置.可选值：left | alternate | right；默认值： left；类型： string。

left: 整个时间轴在左边。时间轴的圈圈在时间轴内容的左边

alternate: 整个时间轴在中间。时间轴的圈圈和时间轴内容的方向交换出现；比如，第一个Timeline.Item圈圈在左边，内容在右边；那么第二个Timeline.Item圈圈就在右边，内容在左边

right: 整个时间轴在右边。时间轴的圈圈在时间轴内容的右边

(2)<Timeline>的子组件<Timeline.Item>时间轴的每一项对应属性:

<1>color: 表示指定圆圈颜色.可选值：blue, red, green, gray，或自定义的色值；默认值： blue；类型： string。

<2>dot: 表示自定义时间轴的圈圈.可选值：无；默认值： -；类型： string|ReactNode。

<3>position: 表示自定义节点位置.可选值：无；默认值： -；类型： left | right。

import React, { PureComponent } from 'react';
import { Tabs, Timeline, Icon, Tooltip } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {return (<div><Timeline pending="Recording..." mode="alternate">
    <Timeline.Item dot={<Icon type="clock-circle-o"/>}>1Create a</Timeline.Item>
    <Timeline.Item color="green">2Sol</Timeline.Item></Timeline></div>)}
};
export default demo;

15、Tag标签

进行标记和分类的小标签。

何时使用：<1>用于标记事物的属性和维度。<2>进行分类。

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

<1>onClose事件: 表示标签关闭时的回调.可选值：无；默认值： -；类型： (e) => void

(-1)<Tag>的子组件<Tag.CheckableTag>可以选择的标签对应的事件

<1>onChange事件: 表示点击标签时触发的回调.可选值：无；默认值： -；类型： (checked) => void

(1)<Tag>组件对应属性: tag组件里面可以其它的组件，其它的组件就是tag标签显示在页面上的样式

<1>closable: 表示标签是否可以关闭。为true，就会在tag的最后出现一个×，点击就可以关闭这个tag.可选值：无；默认值： false；类型： boolean。

<2>color: 表示标签颜色.可选值：无；默认值： false；类型： string。

<3>visible: 表示是否显示标签。为false 的话，就和点击了tag的×之后一样的.可选值：无；默认值： true；类型： boolean。

(2)<Tag>的子组件<Tag.CheckableTag>可以选择的标签对应属性: 这个就很好用了，就是tag可以像按钮那样点击，点击之后可以改变颜色。是用来替换<Checkbox>组件的,因为<Checkbox>组件没有像<Radio>那样，有一个按钮样式，<Checkbox>组件只有一个框

<1>checked: 表示设置标签的选中状态.可选值：无；默认值： false；类型： boolean。

import React, { PureComponent } from 'react';
import { Tag, message,Button, Tooltip } from 'antd';
import moment from 'moment';
class demo extends PureComponent {
  render() {
    function log(e) {}function preventDefault(e) {}function preventDefault2(e) {}
    return (<div><Tag closable color='red' visible={false} onClose={log}>Tag 1</Tag>
    <Tag.CheckableTag checked={false} onChange={preventDefault2}>Prevent Default22</Tag.CheckableTag></div>);}
};
export default demo;

16、Tabs标签页

选项卡切换组件。就是一个选项卡

何时使用：<1>卡片式的页签，提供可关闭的样式，常用于容器顶部。<2>标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。<3>RadioButton 可作为更次级的页签来使用。

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

<1>onChange事件: 表示切换面板的回调.可选值：无；默认值： -；类型： Function(key) {}

key：当前选中的Tabs.TabPane组件的 key

<2>onEdit事件: 表示新增和删除页签的回调，在 type=“editable-card” 时有效.可选值：无；默认值： -；类型： (targetKey, action): void

targetKey: 被选中的Tabs.TabPane组件的 key。如果是点击新增，则这个值为要给类，类里面的很多属性都是null

action: 表示想要触发的行为，点击×，则就为remove；点击+，就为add。可选值 remove add。

<3>onNextClick事件: 表示next 按钮被点击的回调.可选值：无；默认值： -；类型： Function

<4>onPrevClick事件: 表示prev 按钮被点击的回调.可选值：无；默认值： -；类型： Function

<5>onTabClick事件: 表示ab 被点击的回调.可选值：无；默认值： -；类型： Function

(1)<Tabs>组件对应属性: 这个Tabs组件也不能直接作为最外层元素return出去，也需要在它外面包个div，不然会报错

<1>activeKey: 表示当前激活 Tabs.TabPane组件的 key.可选值：无；默认值： -；类型： string。

<2>animated: 表示是否使用动画切换 Tabs，在 tabPosition=top|bottom 时有效.可选值：无；默认值： true, 当 type=“card” 时为 false；类型： boolean | {inkBar:boolean, tabPane:boolean}。

<3>renderTabBar: 表示替换 TabBar，用于二次封装标签头.可选值：无；默认值： -；类型： (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement。

<4>defaultActiveKey: 表示初始化选中的Tabs.TabPane组件的 key.可选值：无；默认值：第一个面板；类型： string。

<5>hideAdd: 表示是否隐藏加号图标，在 type=“editable-card” 时有效.可选值：无；默认值： false；类型： boolean。

<6>size: 表示大小.可选值：large default 和 small；默认值： default；类型： string。

<7>tabBarExtraContent: 表示标签页选项卡头部，右上的额外内容.可选值：无；默认值： -；类型： React.ReactNode。

<8>tabBarGutter: 表示tabs 之间的间隙.可选值：无；默认值： -；类型： number。

<9>tabBarStyle: 表示tab bar 的样式对象.可选值：无；默认值： -；类型： object。

<10>tabPosition: 表示标签页选项卡头部的位置.可选值：top right bottom left；默认值： top；类型： string。

<11>type: 表示标签页选项卡头部的样式.可选值：line、card editable-card；默认值： line；类型： string。

line: 这个的样式为，头部无矩形边框，只要每个标签下面有一条线

card: 这个样式为，每个标签都有一个矩形边框

editable-card: 这个样式为，每个标签都有一个矩形边框，并且还有一个×；在标签页选项卡头部的右上还会出现一个+，用来新增标签

(2)<Tabs>的子组件<Tabs.TabPane>标签页的每一个选项卡对应属性: 这个就是tag标签页的每一个选项卡。这个组件里面可以包含其它组件，被包含的组件就作为对应的选项卡的内容

<1>forceRender: 表示被隐藏时是否渲染 DOM 结构。这个还是很重要的，如果设置为false，则如果没有选到当前tab的时候，当前tab是不会被渲染的.可选值：无；默认值： false；类型： boolean。

<2>key: 表示对应 Tab组件中的activeKey.可选值：无；默认值： -；类型： string。

<3>tab: 表示选项卡头部显示的内容.可选值：无；默认值： -；类型： string|ReactNode。

<4>disabled: 表示是否禁用.可选值：无；默认值： false；类型： boolean。

<5>closable: 表示当Tabs组件的type为editable-card的时候，是否显示右上角的×.可选值：无；默认值： true；类型： boolean。

import React, { PureComponent } from 'react';
import { Tabs, message, Button, Tooltip } from 'antd';
import moment from 'moment';
const { TabPane } = Tabs;
class demo extends PureComponent {
  render() {function callback(key) {}function edit(targetKey, action) {}
    return (<div>
    <Tabs 
        defaultActiveKey="21" 
        onChange={callback} 
        tabPosition="bottom" 
        tabBarExtraContent={'dsa'} 
        type="editable-card"
        onEdit={edit}
    >
        <TabPane key="11" tab="Tab 1" closable={false}>Cont</TabPane>
        <TabPane key="21" tab="Tab 2" disabled>Con</TabPane>
    </Tabs>
        
        // 简单的tabs使用
        <Tabs activeKey={activeKey} onChange={key => {setActiveKey(key)}}>
          <Tabs.TabPane key='progress' tab='进行中广告' />
          <Tabs.TabPane forceRender key='all' tab='全部广告' />
        </Tabs>
    </div>);}
};
export default demo;

17、Table表格

展示行列数据。

何时使用：<1>当有大量结构化的数据需要展现时；<2>当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

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

<1>onChange事件: 表示分页、排序、筛选变化时触发.可选值：无；默认值： -；类型：Function(pagination, filters, sorter, extra: { currentDataSource: [] }) 。

<2>onExpand事件: 表示点击展开图标时触发，即点击child前面的那个+号图标.可选值：无；默认值： -；类型： Function(isExpand, record)。

isExpand: 类型,boolean。表示当前图标是否展开。为true表示点击之后现在变为了展开状态，false表示点击之后现在变为了收缩状态

record: 当前行的所有数据，不是指定义的colunm的title的行数据，而是指对应的dataSourse里面对应这一行的项，的所有属性。因为dataSourse的每一个项，就对应Table在页面上的每一行

<3>onExpandedRowsChange事件: 表示展开的行变化时触发.可选值：无；默认值： -；类型： Function(expandedRows) 。

<4>onHeaderRow事件: 表示设置头部行属性.可选值：无；默认值： -；类型： Function(column, index)。

<5>onRow事件: 表示用来设置行的对应事件，比如点击事件这些，就在这里面设置。这个事件对应的函数需要返回一个对象，对象的属性为事件的名称，值为事件处理函数.可选值：无；默认值： -；类型： Function(record, index)。

比如：设置onRow={(record, index)=>{return {onClick: ()=>{this.onRowSelect(record, index)}}}},这个就给每一行都绑定了一个click事件。但是，这里是只设置行的click事件，前面的checkbox框是不会触发这个的，所以如果是想点击的时候改变前面的选中值，需要在设置checkbox的change事件

record: 当前行的所有数据，不是指定义的colunm的title的行数据，而是指对应的dataSourse里面对应这一行的项，的所有属性。因为dataSourse的每一个项，就对应Table在页面上的每一行

(-1))<Table>的属性columns表格列的配置对应的事件

<1>onCell事件: 表示设置单元格属性.可选值：无；默认值： -；类型： Function(record, rowIndex)。

record: 当前行的所有数据，不是指定义的colunm的title的行数据，而是指对应的dataSourse里面对应这一行的项，的所有属性。因为dataSourse的每一个项，就对应Table在页面上的每一行

<2>onFilter事件: 表示本地模式下，确定筛选的运行函数.可选值：无；默认值： -；类型： Function。

<3>onFilterDropdownVisibleChange事件: 表示自定义筛选菜单可见变化时调用.可选值：无；默认值： -；类型： function(visible) {}。

<4>onHeaderCell事件: 表示设置头部单元格属性.可选值：无；默认值： -；类型： Function(column)。

(-2)<Table>的属性rowSelection表格行前面的选择框(checkbox或者radio)相关配置对应的事件：这些事件也是写在rowSelection属性里面的

<1>onChange事件: 表示表格前面的多选框的，选中项发生变化时的回调.可选值：无；默认值： -；类型： Function(selectedRowKeys, selectedRows)。

selectedRowKeys: 这个即当前选中的所有行的key的数组

recordArr：这个即当前选中的所有行的record(当前行的所有数据的一个对象，不是指定义的colunm的title的行数据，而是指对应的dataSourse里面对应这一行的项，的所有属性。因为dataSourse的每一个项，就对应Table在页面上的每一行)的数组

<2>onSelect事件: 表示用户手动选择/取消选择某行的回调，也是点击前面的选择框才触发。点击全选不会触发这个，而是触发的下面的那个.可选值：无；默认值： -；类型： Function(record, selected, selectedRows, nativeEvent)。

<3>onSelectAll事件: 表示用户手动选择/取消选择所有行的回调.可选值：无；默认值： -；类型： Function(selected, selectedRows, changeRows)。

<4>onSelectInvert事件: 表示用户手动选择反选的回调.可选值：无；默认值： -；类型： Function(selectedRows)。

(-3)<Table>的属性rowSelection的属性selections的选择功能配置对应的事件

<1>onSelect事件: 表示选择项点击回调.可选值：无；默认值： -；类型： Function(changeableRowKeys)。

(1)<Table>组件对应属性:

<1>tableLayout: 表示表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局.可选值：无；默认值：无
固定表头/列或使用了 column.ellipsis 时，默认值为 fixed；类型： - | ‘auto’ | ‘fixed’。

<2>bordered: 表示是否展示外边框和列边框，即是否存在表格里面向下的线.可选值：无；默认值： false；类型： boolean。

<3>childrenColumnName: 表示指定树形结构的列名.可选值：无；默认值： children；类型： string[]。

<4>columns: 表示表格列的配置描述，具体项见下表.可选值：无；默认值： -；类型： ColumnProps[]。

<5>components: 表示覆盖默认的 table 元素.可选值：无；默认值： -；类型： TableComponents。

<6>dataSource: 表示表格的数据数组。数组的每一项为一个对象，对象里面的属性为columns里面定义的dataIndex属性值，当然还要再对象里面加上key，也可以加上children弄成一个树形结构.可选值：无；默认值： -；类型： any[]。

如：[{key: '1',name: 'John Brown',age: 32,tags: ['nice', 'developer'],}]

children属性：dataSource里面添加这个属性，即为弄成一个树形表格。children依然为一个数组，数组里面为对象。只不过children里面的行，是在当前行下面的子行。可以点击加号，来显示出来

<7>defaultExpandAllRows: 表示初始时，是否展开所有行.可选值：无；默认值： false；类型： boolean。

<8>defaultExpandedRowKeys: 表示默认展开的行.可选值：无；默认值： -；类型： string[]。

<9>expandedRowKeys: 表示展开的行，控制属性.可选值：无；默认值： -；类型： string[]。

<10>expandedRowRender: 表示设置了这个就会在最前面(checkbox前面)添加一个加号按钮，点击之后就会在当前行下面，展开对应的这个函数return出来的值.可选值：无；默认值： -；类型： Function(record, index, indent, expanded):ReactNode。

这个函数，在点击前面加号按钮的时候才触发。

record: 当前点击的行的record(当前行的所有数据对象不是指定义的colunm的title的行数据，而是指对应的dataSourse里面对应这一行的项，的所有属性。因为dataSourse的每一个项，就对应Table在页面上的每一行)

index: 当前点击的行的index。(默认0开始)

indent: 当前点击的行的缩进宽度。(默认为1)

expanded: 当前点击的行是否打开。默认为true

这个函数return出来的值，为点开之后，展示在当前行下面的东西

<11>expandIcon: 表示自定义展开图标，参考示例.可选值：无；默认值： -；类型： Function(props):ReactNode。

<12>expandRowByClick: 表示通过点击行来展开子行.可选值：无；默认值： false；类型： boolean。

<13>footer: 表示定义一个，表格尾部，位置在表格的下面.可选值：无；默认值： -；类型： Function(currentPageData)。

也会return出去一个react元素

<14>indentSize: 表示展示树形数据时，每层缩进的宽度，以 px 为单位.可选值：无；默认值： 15；类型： number。

<15>loading: 表示页面是否加载中.可选值：无；默认值： false；类型： boolean|object (更多) 。

<16>locale: 表示默认文案设置，目前包括排序、过滤、空数据文案.可选值：无；默认值： filterConfirm: ‘确定’
filterReset: ‘重置’
emptyText: ‘暂无数据’
默认值；类型： object。

<17>pagination: 表示分页配置，具体的配置和pagination组件一样的，不过这里是弄成个属性了。参考配置项或 pagination 文档，设为 false 时不展示和进行分页。table的分页设置是，如果本次返回了100条数据，但是table的pagesize为10，则table会自动分为10页，每页都有10条数据，点击对应的页码就会显示出数据，而不需要再发送请求.可选值：无；默认值： -；类型： object。

如果设置了defaultPageSize，那么data如果大于这个值，会自动分页

<18>rowClassName: 表示表格里面每一行的类名，可以用这个来实现奇偶行颜色不同.可选值：无；默认值： -；类型： Function(record, index):string。

<19>rowKey: 表示表格行 key 的取值，可以是字符串或一个函数.可选值：无；默认值： ‘key’；类型： string|Function(record):string。

<20>rowSelection: 表示表格行前面的选择框(checkbox或者radio)相关配置。即，在每一行的前面加上一个选择框(checkbox或者radio)样式的选择框，用来选择每一行.可选值：无；默认值： null；类型： object。

<21>scroll: 表示表格是否可滚动，具体看下面配置项.可选值：无；默认值： -；类型： object。

<22>showHeader: 表示是否显示表头.可选值：无；默认值： true；类型： boolean。

<23>size: 表示表格大小.可选值：无；默认值： default；类型： default | middle | small。

<24>title: 表示定义一个表格标题，位置在表格的上面.可选值：无；默认值： -；类型： Function(currentPageData)。

函数会return出来要给react元素，就为展示在表格标题处的元素

<25>getPopupContainer: 表示设置表格内各类浮层的渲染节点，如筛选菜单.可选值：无；默认值： () => TableHtmlElement；类型： (triggerNode) => HTMLElement

(2)<Table>的属性columns表格列的配置对应属性: 这个的，就是说配置表头的每一列，对应dataSource数组中的每一项的哪个属性。dataSource数组中的每一项，即代表table表格的每一行

<1>align: 表示设置列的对齐方式.可选值：无；默认值： ‘left’；类型： ‘left’ | ‘right’ | ‘center’。

<2>ellipsis: 表示单元格的内容超过宽度将展示为(…),相当于全局的overflow：ellipsis，暂不支持和排序筛选一起使用。
设置为 true 时，表格布局将变成 tableLayout=“fixed”。.可选值：无；默认值： false；类型： boolean。

<3>className: 表示每一列对应的样式类名。这个属性就太好用了，可以给每一个列设置一个样式，来解决固定列产生的宽度问题.可选值：无；默认值： -；类型： string。

<4>colSpan: 表示表头列合并,设置为 0 时，不渲染.可选值：无；默认值： -；类型： number。

<5>dataIndex: 表示的是，dataSouce中数组的每一项即表示table中的一行。而这一项里面的属性，在table行里面放的位置，就用这个来指定。它的值为，dataSource中对应的 key(属性)值，来让每一列，和一行中的所有数据可以对应起来。即在一行中，和列中的dataIndex值，对应的那个属性值，就代表了这个属性对应的数据在哪一列.可选值：无；默认值： -；类型： string。

比如：columns中配置了[{title:'name',dataIndex:'name'},{title:'name2',dataIndex:'name2'}]

然后在dataSource中配置了[{key:1,name:'rock',name2:'rock2'}]

这样，name这一列，在下面的第一行中，对应的值就是rock；name2这一列，在下面一行中，对应的值就是rock2

<6>defaultFilteredValue: 表示默认筛选值.可选值：无；默认值： -；类型： string[]。

<7>defaultSortOrder: 表示默认排序顺序.可选值：无；默认值： -；类型： ‘ascend’ | ‘descend’。

<8>filterDropdown: 表示可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互.可选值：无；默认值： -；类型： React.ReactNode | (props: FilterDropdownProps) => React.ReactNode。

<9>filterDropdownVisible: 表示用于控制自定义筛选菜单是否可见.可选值：无；默认值： -；类型： boolean。

<10>filtered: 表示标识数据是否经过过滤，筛选图标会高亮.可选值：无；默认值： false；类型： boolean。

<11>filteredValue: 表示筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组.可选值：无；默认值： -；类型： string[]。

<12>filterIcon: 表示自定义 filter 图标。.可选值：无；默认值： false；类型： ReactNode|(filtered: boolean) => ReactNode。

<13>filterMultiple: 表示是否多选.可选值：无；默认值： true；类型： boolean。

<14>filters: 表示表头的筛选菜单项.可选值：无；默认值： -；类型： object[]。

<15>fixed: 表示列是否固定，需要配合scroll.x使用.可选值：true(等效于 left) ‘left’ ‘right’；默认值： false；类型： boolean|string。

注：给列设置这个fixed的时候，需要给列同时设置width属性。不然会出现空白

<16>key: 表示就是为了性能用的。React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性.可选值：无；默认值： -；类型： string。

<17>render: 表示即对每一列下面的数据(不包括列头)，进行操作，然后用return出来的值替换掉之前的数据。@return 里面可以设置表格行/列合并.可选值：无；默认值： -；类型： Function(text, record, index) {}。

text: 当前列下面对应的，当前行的值。John Brown

record: 当前行的所有数据的一个对象。这个就不只是当前列下面的那一个了，而是对应行的所有数据。如{key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park"}

index: 行索引。从0开始。如0

如：输出参数为John Brown {key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park"} 0

最后return为render: (text:any,record:any,index:any) => <a>{text}"go"</a>;,就会在这一列的所有行，的数据的最后都加一个“go”

用这个render，就可以实现在每一行的最后，加上一个删除按钮，或者在最前面加上一个单选按钮了。

如果return出来的值是用<a>标签包裹的那么，可以和ellipsis属性配合使用，如果是用<Button type='link'>包裹的，那么不能和ellipsis属性配合使用

<18>sorter: 表示排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true.可选值：无；默认值： -；类型： Function|boolean。

<19>sortOrder: 表示排序的受控属性，外界可用此控制列的排序，可设置为 ‘ascend’ ‘descend’ false.可选值：无；默认值： -；类型： boolean|string。

<20>sortDirections: 表示支持的排序方式，取值为 ‘ascend’ ‘descend’.可选值：无；默认值： [‘ascend’, ‘descend’]；类型： Array。

<21>title: 表示对应的列的，列头显示的文字,或者react元素.可选值：无；默认值： -；类型： ReactNode|({ sortOrder, sortColumn, filters }) => ReactNode。

<22>width: 表示列宽度，可以是百分比(如果设置为百分比值，直接用字符串就好了).可选值：无；默认值： -；类型： string|number。

普通情况下，这个width的100%相对的是整个表格的宽度。但是，如果设置了scroll的x，那么这个width的100%就等于scroll的x的值

(3)<Table>的子组件<Table.ColumnGroup>列组对应属性:

<1>title: 表示列头显示文字.可选值：无；默认值： -；类型： string|ReactNode。

(4)<Table>的属性pagination分页器配置对应属性: 分页的配置项。

<1>position: 表示指定分页显示的位置.可选值：无；默认值： ‘bottom’；类型： ‘top’ | ‘bottom’ | ‘both’。

(5)<Table>的属性rowSelection表格行前面的选择框(checkbox或者radio)相关配置，对应属性: 这个就会在每一行的前面加上一个选择框(checkbox或者radio)样式

<1>columnWidth: 表示自定义列表选择框宽度.可选值：无；默认值： 60px；类型： string|number。

<2>columnTitle: 表示自定义列表选择框标题.可选值：无；默认值： -；类型： string|React.ReactNode 。

<3>fixed: 表示把选择框列固定在左边.可选值：无；默认值： -；类型： boolean。

<4>getCheckboxProps: 表示选择框的默认属性配置.可选值：无；默认值： -；类型： Function(record)。这个record就是这一行的所有数据,和上面是一样的

这东西的返回值，是表格前面的checkbox的配置。如return {defaultChecked: true};,则所有的选择框就默认被选中了

<5>hideDefaultSelections: 表示自定义选择项时去掉『全选』『反选』两个默认选项.可选值：无；默认值： false；类型： boolean。

<6>selectedRowKeys: 表示指定选中项的 key 数组，需要和 onChange 进行配合.可选值：无；默认值： []；类型： string[]|number[]。

<7>selections: 表示自定义选择项配置项, 设为 true 时使用默认选择项.可选值：无；默认值： true；类型： object[]|boolean。

<8>type: 表示设置前面为多选或者单选，checkbox or radio.可选值：无；默认值： checkbox；类型： string。

(6)<Table>的属性scroll滚动，配置项对应属性: 这个即设置固定一部分，然后其他部分可以滚动。表格是不用设置width和height的，下面这两个就相当于是设置表格的width和height

<1>x: 表示设置横向滚动，也可用于指定滚动区域的宽和高。只有设置了这个值之后，向右拉动滚动条，表头才会一起被拉动；不然就只有内容被拉动.可选值：‘max-content’/true/number/百分比/vw；默认值： -；类型： number | true | string。

这个值，即整个table的长度，也就是设置columns里面width的总100%宽度。

需要配合fixed使用，设置的值，一般大于表格的宽度。并且列中对应fixed的列的width，一般情况下就设置固定值了，不然样式容易出问题。

由于是接收字符串的，所以可以用vw来设置值。如scroll={ { x: '50vw' }}

<2>y: 表示设置纵向滚动，也可用于指定滚动区域的宽和高.可选值：‘max-content’/true/number/百分比/vh；默认值： -；类型： number | true| string。

这个值为除去表格header之外，剩余的高度。设置了这个之后，如果里面数据总高度大于这个值，会被hidden，然后可以向下滚动

由于是接收字符串的，所以可以用vh来设置值。如scroll={ { y: 'calc(100vh - 320px)' }}

<3>scrollToFirstRowOnChange: 表示当分页、排序、筛选变化后是否滚动到表格顶部.可选值：无；默认值： -；类型： boolean。

(7)<Table>的属性rowSelection的属性selections的选择功能配置对应属性:

<1>key: 表示React 需要的 key，建议设置.可选值：无；默认值： -；类型： string。

<2>text: 表示选择项显示的文字.可选值：无；默认值： -；类型： string|React.ReactNode 。

// fenceManage.less文件
// 表格样式重置
.tableStyle {
    :global {
        .ant-table {
            border: none !important;
            th, td {text-align: center;border: none !important;}
        }
        .ant-table-thead { // 如果设置了scroll，就有ant-table-header类名，就可以在这上面设置样式。如果没用scroll，就只有ant-table-thead类名。所以，一般还是在ant-table-thead上面设置样式
            background: #848996 !important;
            tr th {color: #fff !important;}
        }
        .ant-pagination {
            display: flex !important;
            justify-content: flex-end;
            width: 100%;
            .ant-pagination-total-text {flex: 1;}
        }
    }
    .tableEvenLine {background: #F5F5F5;}
    .tableOddLine {background: #FFFFFF;}
}

import React, { useState } from 'react';
import { Table,Divider,Tag } from 'antd';
import styles from '../fenceManage.less';

function demo(props) {
const [brandList2, setBrandList2] = [{lookupValueCode: 'aa',lookupValueName: 'name',}];

const columns = [
  {title: 'Name',dataIndex: 'name',key: 'name',width: 100,fixed: 'left',
  render: (text:any,record:any,index:any) => {return <a>{text}"go"</a>;},},
  {title: 'Age',dataIndex: 'age',width: '20%',ellipsis: true,},
  { title: '品牌', dataIndex: 'appCode', width: '10%',
      render: (text, record, index) => { // 这里就是如果后台返回的品牌是为一个 code 拼接的字符串，所以就需要这样子处理
        const tempArr = text.split(',').map(brandCode => {
          const item = brandList2.find(value => {return value.lookupValueCode === brandCode;});
          if(item !== undefined)return item.lookupValueName;
          return brandCode;
        });
        return tempArr.join(',');
      },
  },
  {title: '时间', dataIndex: 'time', width: '23%',
    render: (text, record, index) => {
      const date = new Date(text);
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month >= 10 ? month : ('0' + month);
      let day = date.getDate();
      day = day >= 10 ? day : ('0' + day);
      let hours = date.getHours();
      hours = hours >= 10 ? hours : ('0' + hours);
      let minutes = date.getMinutes();
      minutes = minutes >= 10 ? minutes : ('0' + minutes);
      let seconds = date.getSeconds();
      seconds = seconds >= 10 ? seconds : ('0' + seconds);
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      // 或者 return moment(text).format('YYYY-MM-DD HH:mm:ss');
    }},
    {title: '广告图片', dataIndex: 'fileInfo', width: '19%',
    render: (text, record, index) => {
      if (record.fileInfo === null || typeof record.fileInfo !== 'string') return '';
      const tempFileInfo = JSON.parse(record.fileInfo);
      const url = tempFileInfo[0].fileDetail[0].filePath;
      if (/(\.mp4|\.mov)$/.test(url)) {
        return <video width="100%" src={url} />;
      }
      return <img src={url} alt='图片.png' style={
   
   {width: '100%'}} />;
    }},
  { title: '操作',render: (text, record, index) => {
        const operator = (<Row type="flex" justify="space-around"><Col><Button size="small" type='link' onClick={() => {this.editFenceCars(record);}}>编辑车辆</Button></Col></Row>);
        return operator;
   },},
];

const data =  [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],
    children: [{key: '222',name: 'Jim Green222',age: 42,address: 'London No. 1 Lake Park11111111',tags: ['loser1111'],}]},
  {key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},
  {key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',tags: ['cool', 'teacher'],},];
  
    const tebleProps = {
        bordered: true,
        title: () => 'Header',
        footer: () => 'Footer',
        pagination: { defaultPageSize: 2 },
        size: 'small',
        scroll: { x: '130vw',y: y:'calc(100vh - 其他元素的高度和)' },
        columns: columns,
        dataSource: data,
        onRow: (record, index)=>{
            return {onClick: ()=>{
                const { key } = record;
                const isFindIndex = selectedRowKeys.findIndex(value => {if (value === key) return true;});
                let finalArr = [];
                if (isFindIndex !== -1) {
                  selectedRowKeys.splice(isFindIndex,1);finalArr = [...selectedRowKeys];
                } else {finalArr = [...selectedRowKeys,key];}
                this.setState({selectedRowKeys: finalArr,});
              }};
        },
        rowSelection: {
            type: 'checkbox',
            selectedRowKeys: [],
            onChange: (selectedRowKeys2, selectedRows2)=>{},
        },
        rowClassName: (record,index)=>{return (index+1) % 2 === 0 ? styles.tableEvenLine : styles.tableOddLine;},
        className: styles.tableStyle,
    };
    return (<Table {...tableProps} />);
}
export default demo;

四、数据展示组件(2)

12、Tree树形控件

13、Tooltip文字提示

14、Timeline时间轴

15、Tag标签

16、Tabs标签页

17、Table表格

猜你喜欢