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;