表格 Table
何时使用
- 当有大量结构化的数据需要展现时,可使用
Table
组件; Table
组件拥有多种可自由组合使用的功能特性,包括:- 大数据渲染
- 拖拽交换、拖拽改变列宽
- 行选择(单选/多选)
- 表体滚动
- 数据操作
- 支持多种表格编辑形式
- 列锁定
- 列过滤
- 列隐藏
- 列排序
Grid
组件聚合了Table
组件的所有功能特性,并在此基础上封装了导出数据、工具栏、分页、数据关联等高级功能。可达到随用随取、开箱即用的体验。当需要使用多种功能组合的Table
展示时,推荐使用Grid组件。
如何使用
import { Table } from 'tinper-bee';
or
import Table from 'bee-table';
import 'bee-table/build/Table.css';
能力特性
API
Table props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 传入的表格数据(key值必需,否则会导致部分功能出现问题。建议使用唯一的值,如id) | array | [] |
columns | 列的配置表,具体配置见下表 | array | - |
columnKey | 如果columnKey是字符串,column [columnKey] 将被作为主键。 |
string | 'key' |
bordered | 是否展示外边框和列边框 | boolean | false |
defaultExpandAllRows | 默认是否展开所有行 | bool | false |
defaultExpandedRowKeys | 初始扩展行键 | array | [] |
rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
rowKey | 如果rowKey是字符串,record [rowKey] 将被用作键。如果rowKey是function,rowKey(record, index) 的返回值将被用作键。树形表格时作为每条数据的唯一标示,如果唯一标示不是"key"键的值,则必须传入,例如 rowKey='id' |
string or Function(record, index):string | 'key' |
expandedRowKeys | 展开的行,控制属性 | array | - |
rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
indentSize | indentSize为每个级别的data.i.children,更好地使用column.width指定 | number | 15 |
expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
expandIconColumnIndex | expandIcon的索引,当expandIconAsCell为false时,将插入哪个列 | number | 0 |
expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
haveExpandIcon | 控制是否显示行展开icon.注:该参数只有在和expandedRowRender同时使用才生效 | Function(record, index):bool | () =>false |
expandedIcon | 嵌套表格场景中展开子表时的展开图标 | ||
collapsedIcon | 嵌套表格场景中关闭子表时的关闭图标 | ||
expandRowByClick | 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 | bool | false |
rowDraggAble | 是否增加行交换顺序功能 | boolean | false |
useDragHandle | 通过行手柄进行拖拽排序,在 rowDraggAble 为 true 时有效 |
boolean | false |
showHeader | 是否显示表头 | bool | true |
title | 表格标题 | Function | - |
footer | 表格尾部 | Function | - |
emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
loading | 表格是否加载中 | bool | object(详情可以参考上面示例) |
getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
bodyStyle | 添加到tablebody上的style | object | {} |
style | 添加到table上的style | object | {} |
scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度 | { x: number / 百分比 , y: number } |
{} |
headerScroll | 表头下是否显示滚动条 | bool | false |
footerScroll | 表尾和body是否公用同一个横向滚动条。( 如果footer中也是一个table组件,并且也具有滚动条,那么也需要加入footerScroll参数,内层表格的footerScroll设置成false。 ) | bool | false |
resetScroll | 将表格横向滚动条位置还原 | bool | false |
filterable | 是否开启根据条件来过滤数据 | bool | false |
filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300 |
sort | 排序的属性 | object | { mode:'single'//单列排序, backSource:false //默认是前端排序,值为true为后端排序 } mode:multiple-多列排序 |
syncHover | 是否同步Hover状态到左侧Checkbox,关闭此功能有助于提升性能 | bool | true |
loadBuffer | 使用BigData高阶组件实现大数据加载时,上下加载的缓存 | number | 5 |
hoverContent | hover某行时,动态渲染行菜单元素,此方法需返回行菜单元素的内容 | Function | |
heightConsistent | 当固定列内容高度超出非固定列时,内容互错行,当此属性为true会将高度同步,当行过多时会有性能影响,所以建议非固定高度如果过高时,超出内容可以显示成省略号 | bool | false |
height | 自定义表格行高 | number | - |
headerHeight | 自定义表头行高 | number | - |
headerDisplayInRow | 设置表头的内容显示一行,超出显示省略号 | bool | true |
bodyDisplayInRow | 设置表体的内容显示一行,超出显示省略号,注意:不要和 height 属性一起使用,该属性优先级高于 height | bool | true |
size | 表格大小 | sm / md / lg |
'md' |
hideHeaderScroll | 表体无数据时,表头下是否显示滚动条,默认显示 | bool | false |
[v2.2.2新增]showRowNum | 展示序号功能,false时不展示,true时展示默认情况,可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
[v2.2.8新增]autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
[v2.2.8新增]autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
onPaste | 粘贴的回调函数 | func(event,positon) | - |
onBodyScroll | table body 滚动的回调 | func(scrollTop) | - |
syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能,注:树表和主子表不允许关闭 | true | - |
快捷键部分参考示例 (快捷键在table中的简单使用应用)
注意: data参数中的key值必需,否则会导致部分功能出现问题!建议使用唯一的值,如id
Table events
事件名 | 说明 | 类型 | 返回值 |
---|---|---|---|
onExpand | 展开行时的钩子函数 | Function(expanded, record) | expanded : 当前的状态record : 当前行的数据 |
onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRowKeys) | expandedRowKeys : 展开行的keys数组 |
onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | record : 当前行的数据index : 当前行的indexevent : 事件对象 |
onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | record : 当前行的数据index : 当前行的indexevent : 事件对象 |
onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function(field,value,condition) | field : 字段名称 value : 字段值 condition : 判断条件 |
onFilterClear | 清除过滤条件的回调函数,回调参数为清空的字段 | function(field) | field : 字段名称 |
onRowHover | 行hover时的回调函数 | function(index,record) | index : 当前行的indexrecord : 当前行的数据 |
onDragRowStart | 行拖拽开始时的回调函数 | function(record,index) | record : 当前行的数据 index : 当前行的index |
onDropRow | 行拖拽结束后的回调函数 | function(data,record) | data : 拖拽后的新data数组record : 拖拽行的数据 |
Data
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
style | 该行的样式,严格按照react的样式书写规则,即对象内每一个属性的键为小写驼峰式,值为字符串 | object | - |
Column
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 列的键 | string | - |
className | 传入列的classname | String | - |
colSpan | 表头列合并,设置为 0 时,不渲染 | Number | - |
title | 列的标题 | node | - |
dataIndex | 显示数据记录的字段 | String | - |
width | 宽度的特定比例根据列的宽度计算 | String/Number | - |
fixed | 当表水平滚动时,此列将被固定:true或'left'或'right' | true/'left'/'right' | - |
sorter | 前端列排序方法,只要列上有此属性就说明这列可排序。注:默认是前端排序,排序方法书写时注意有些字段的值可能是undefined的情况,需要转换成0 | function | - |
sorterClick | 排序的回调函数 | function | - |
render | cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置,可以设置单元格行/列合并。2.2.48及以后版本新增第四个参数options为column设置的属性 | - | |
onCellClick | 单击列的单元格时调用 | Function(row, event) | - |
onHeadCellClick | 单击表头的单元格时调用 | Function(row, event) | row 当前行的数据 |
order | 设置排序 | string("descend"、"ascend") | - |
filterType | 过滤下拉的类型.可选text(文本框) ,dropdown(下拉) ,date(日期) ,dateyear(日期-年) ,datemonth(日期-月) ,dateweek(日期-周) ,daterange(日期范围) ,number(数值) |
string | text |
filterDropdown | 是否显示过滤下拉.可选show ,hide |
string | show |
format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
filterDropdownAuto | 设置下拉条件是否自动设置选项,auto 自动根据当前数据生成,manual 手动传入,可以使用filterDropdownData 来传入自定义数据 |
string | auto |
filterDropdownData | 下拉条件自定义数据,filterDropdownAuto=manual生效,传入格式:[{ key : "自定义", value : "自定义" }] | array | [] |
filterDropdownFocus | 触发点击下拉条件的回调,一般用于异步点击请求数据使用 | function | () => () |
filterDropdownType | 下拉条件类型,分为 string 和 number 条件类型 | string | string |
filterDropdownIncludeKeys | 能够设置指定的下拉条件项,通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有 |
filterInputNumberOptions | 数值框接收的props,具体属性参考bee-input-number | object | null |
textAlign | 内容对齐方式,默认是左对齐('left、right、center') | string | |
mergeEndIndex | 大数据量滚动加载场景,合并表格行时,设置合并结束位置的行 index 值,设置在列 render 函数中的 props 属性上 | Number | |
textAlign | 列对齐方式,默认是左对齐('left、right、center') | string | |
[v2.2.2新增]sortEnable | 开启默认排序,根据fieldType属性确定排序规则,默认按字符串排序;优先级低于sorter属性;需配合高阶函数multiSelect 使用 |
bool | false |
[v2.2.2新增]fieldType | 列类型,可选string ,number ,currency ,bool ,link |
string | 'string' |
[v2.2.2新增]fontColor | 列文本颜色 | string | - |
[v2.2.2新增]bgColor | 列背景颜色 | string | - |
[v2.2.2新增]titleAlign | 标题对齐方式 | 'left'|'center'|'right' | 'left' |
[v2.2.2新增]contentAlign | 内容对齐方式 | 'left'|'center'|'right' | 'left' |
[v2.2.2新增]required | 必填项的列标题展示红色星号 | bool | false |
isShow | 是否展示该列数据 | bool | true |
cellMenu | 渲染单元格内操作按钮 | object | - |
style | 该列的样式,严格按照react的样式书写规则,即对象内每一个属性的键为小写驼峰式,值为字符串 | object | - |
sumRender | 自定义合计render函数 | func(value) | - |
[v2.2.x新增] cellMenu
属性的参数说明如下:
名称 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
menu | 自定义的操作列表 | array | 是 | [] |
icon | 自定义图标 | string/element | 否 | 三圆点图标<Icon type='uf-3dot-h'/> |
iconSize | 自定义图标时可能会出现右侧对齐的问题,需要手动调整图标大小 | number | 否 | 21 |
trigger | 控制下拉菜单的出现方式 | 'hover'|'click' | 否 | 'hover' |
className | 下拉菜单的类名 | string | 否 | - |
其中,menu的配置如下:
名称 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
key | 每一项需要的唯一的key值 | string | true | - |
text | 每一项的标题 | string | false | - |
icon | 每一项的图标信息 | string/element | false | - |
callback | 点击行后的回调函数 | Function(text,record,index) | false | - |
[v2.2.2新增]fieldType
fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前,已有string
,number
,currency
,bool
,link
,date
,select
,stringChinese
类型,支持自定义配置(string
类型为默认类型)。
stringChinese类型的渲染同string,在配合高阶组件sort使用时,可支持中文拼音排序
numberConfig
具体属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
thousand | 是否展示千分符号 | bool | true |
preSymbol | 数值的前缀 | string | null |
nextSymbol | 数值的后缀 | string | null |
- currencyConfig
具体属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
thousand | 是否展示千分符号 | bool | true |
preSymbol | 数值的前缀 | string | null |
nextSymbol | 数值的后缀 | string | null |
precision | 精度 | number | 2 |
makeUp | 末位是否补零 | bool | true |
- boolConfig
具体属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
trueText | 数值为true时的展示文本 | string | '是' |
falseText | 数值为false时的展示文本 | string | '否' |
- linkConfig
具体属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 获取url的函数 | function(text,record,index) | null |
urlIndex | 数据内url字段的key值 | string | null |
desc | 鼠标hover时展示的title值,为false时不展示,true时展示链接的url,为字符串时展示字符串,为函数时展示返回值,如(text,record,index)=>'text' | bool|string|func | true |
descIndex | 数据内desc字段的key值 | string | null |
linkType | 打开窗口的方式 | '_self'|'_blank' | '_blank' |
linkColor | 链接的字体颜色 | string | '#0073E1' |
underline | hover时是否展示下划线 | bool | false |
className | 链接的className | string | null |
url和urlIndex属性至少有一个,均存在时url优先级更高
desc和descIndex属性相比,desc优先级更高
- dateConfig
具体属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
moment | 传入的moment对象,必需 | object | - |
format | 渲染的时间格式 | string | 'YYYY-MM-DD' |
需要单独安装moment.js,并将moment对象传入
- selectConfig
名称 | 说明 | 类型 | 必填项 | 默认值 |
---|---|---|---|---|
options | 下拉的key/value对应关系 | object | 是 | - |
defaultShow | 找不到对应关系时的展示值 | string | 否 | '' |
无options时按string类型渲染
高阶函数
Table内部封装了七个高阶组件,接收基础 Table 组件作为输入,输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。
注:不要在render方法内部使用高阶组件。这样不仅会有性能问题 – 重新挂载一个组件还会导致这个组件的状态和他所有的子节点的状态丢失。
使用时需要单独引用相应的js文件,目录在lib文件夹,以多选功能(multiSelect)为例:
import multiSelect from "tinper-bee/lib/multiSelect.js";
singleSelect 单选功能
如何使用
import singleSelect from "tinper-bee/lib/singleSelect.js";
import { Table, Radio } from 'tinper-bee';
const SingleSelectTable = singleSelect(Table, Radio);
API
Table 组件参数:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
selectedRowIndex | 指定当前选中数据的 index | number | 无 |
singleSelect 使用示例
multiSelect 多选功能
如何使用
import multiSelect from "tinper-bee/lib/multiSelect.js";
import { Table, Checkbox } from 'tinper-bee';
const MultiSelectTable = multiSelect(Table, Checkbox);
API
Table 组件参数:
参数 | 说明 | 类型 | 返回值 |
---|---|---|---|
getSelectedDataFunc | 返回当前选中的数据数组 | Function | selectedList : 当前选中的行数据集合record : 当前操作行数据index : 当前操作行索引 |
multiSelectConfig | 自定义 Checkbox 属性,如设置复选框为红色填充 | Object | - |
Data 数组参数:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
_checked | 设置是否选中当前数据 | boolean | true/false |
_disabled | 设置是否禁用当前数据 | boolean | true/false |
multiSelect 使用示例
sort 排序功能
如何使用
import sort from "tinper-bee/lib/sort.js";
import { Table, Icon } from 'tinper-bee';
const SortTable = sort(Table, Icon);
API
column 数组参数:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
sorter | 排序函数,可以自定义 | Function | 无 |
sorterClick | 排序钩子函数 | Function | (coloum,type) |
sort 使用示例
sum 合计功能
如何使用
import sum from "tinper-bee/lib/sum.js";
import { Table } from 'tinper-bee';
const SumTable = sum(Table);
//[v2.2.49新增]precision为精度,默认为2
const SumTable = sum(Table,precision);
API
column 数组参数:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
sum 使用示例
dragColumn 拖拽列功能
如何使用
import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';
const DragColumnTable = dragColumn(Table);
API
Table 组件参数:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dragborder | 拖拽调整列宽度 | boolean | false |
draggable | 拖拽交换列 | boolean | false |
minColumnWidth | 拖拽列宽度的最小限制 | number | 80 |
onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e,width) => {} |
onDraggingBorder | 调整列宽过程中触发的回调函数 | function | (e,width) => {} |
dragColumn 使用示例
filterColumn 过滤功能
如何使用
import filterColumn from "tinper-bee/lib/filterColumn.js";
import { Table, Checkbox, Popover, Icon } from 'tinper-bee';
const FilterColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
API
无
filterColumn 示例
bigData 大数据渲染
如何使用
import bigData from "tinper-bee/lib/bigData.js";
import { Table } from 'tinper-bee';
const BigDataTable = bigData(Table);
API
Table 组件参数:
参数 | 说明 | 类型 | 返回值 |
---|---|---|---|
onBodyScroll | 表体滚动加载时触发的回调函数 | function(endIndex) | endIndex : 可视区最后一条数据的 index 序号 |
bigData 使用示例
rendertype
在表格中提供了多种rendertype可以供选择,比如下拉框,输入框,日期等
需要单独的去引用相应的js文件,目录在render文件夹,示例如下:
import renderInput from "tinper-bee/lib/InputRender.js";
InputRender
输入框类型render
依赖的组件
该render依赖于Icon
,FormControl
,Form
,Tooltip
。
配置
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 该输入框获取数据时的key值,该值不能设置重复且必填 | string | - |
placeholder | 输入框的提示信息 | string | - |
value | 输入框中的显示值 | string | 无 |
isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
onChange | 当值发生改变的时候触发的方法 | Function | 无 |
format | 浏览态格式化类型,Currency:货币数字; | string | 无 |
formItemClassName | FormItem的class | string | - |
mesClassName | 校验错误信息的class | string | - |
isRequire | 是否必填 | bool | false |
check | 验证的回调函数,参数两个,第一个为校验是否成功true/false 第二个为验证结果对象{name: "", verify: false, value: ""} |
function | - |
method | 校验方式,change/blur | string | - |
errorMessage | 错误提示信息 | dom/string | "校验失败" |
htmlType | 数值类型,目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
reg | 校验正则,注:设置 htmlType 后 reg 无效 | regExp | - |
使用
import renderInput from "tinper-bee/lib/InputRender.js";
import { Icon, Form , FormControl } from 'tinper-bee';
const InputRender = renderInput(Form, FormControl, Icon);
DateRender
日期类型render
依赖的组件
该render依赖于moment
, Datepicker
, Icon
配置
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
type | 控制日期的显示格式,DatePicker、MonthPicker或者WeekPicker,暂时不支持RangePicker | string | "DatePicker" |
注:其他参数参见Datepicker组件参数配置
使用
import renderDate from "tinper-bee/lib/DateRender.js";
import Datepicker from "tinper-bee/lib/Datepicker";
import { Icon } from 'tinper-bee';
const DateRender = renderDate(Datepicker, Icon);
SelectRender
下拉框类型render
依赖的组件
该render依赖于Icon
,Select
配置
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
dataSource | 数据的键值对,在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] |
array | - |
注:其他参数参见Select组件参数配置
使用
import renderSelect from "tinper-bee/lib/SelectRender.js";
import { Icon, Select } from 'tinper-bee';
const SelectRender = renderSelect(Select, Icon);
CheckboxRender
复选框类型render
依赖的组件
该render依赖于Icon
,Checkbox
配置
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
onChange | 修改后触发回调函数 | function | () => {} |
value | 设置是否选中值 | boolean | false |
注:其他参数参见Checkbox组件参数配置
使用
import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";
import { Icon, Checkbox } from 'tinper-bee';
const CheckboxRender = renderCheckbox(Checkbox, Icon);
快捷键API
快捷键 | 快捷键说明 | 类型 | 默认值 |
---|---|---|---|
focusable | 是否开启快捷键功能 | bool | false |
onKeyTab | tab快捷键,可以处理默认选中第一条数据 | function | () => {} |
onKeyUp | ↑(上箭) 快捷键,可以处理table的上一条数据 | function | () => {} |
onKeyDown | ↓(下箭)快捷键,可以处理table的下一条数据 | function | () => {} |
onTableKeyDown | 触发table的所有快捷键 | function | () => {} |
tabIndex | 设置焦点顺序 | number | 0 |
注意事项
如果使用了固定列,请给固定的列设定固定宽度既width属性。
在使用expandedRowRender属性扩展表格时,如果同时使用了固定列。 需要给expandedRowRender中返回的对象添加
style=\{{height: xxx}\}
,来使扩展后的固定列扩展成一样高度。
当表格场景比较复杂时,可以使用复杂表格ComplexGrid。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。
更新日志
-
v2.2.51 2020-07-09 ( release地址 )
-
v2.2.42 2020-03-22 ( release地址 )
- bee-table @2.2.42
- [ Feature ] 增加 columnKey 属性,column[columnKey]可作为主键。
- bee-table @2.2.42
-
v2.2.34 2020-02-10 ( release地址 )
- bee-table @2.2.34
- [ Fixbug ] 解决treetable右侧出现空白的问题。
- [ Fixbug ] 解决模态框中表格滚动条计算问题。
- bee-table @2.2.34
-
v2.2.32 2020-01-07 ( release地址 )
- bee-table @2.2.32
- [ Fixbug ] 固定表头增加最大宽度限制。
- bee-table @2.2.32
-
v2.2.31 2020-01-07 ( release地址 )
- bee-table @2.2.31
- [ Fixbug ] 行拖拽,表头更新后,拖拽把手丢失。
- bee-table @2.2.31
-
v2.2.29 2019-12-26 ( release地址 )
- bee-table @2.2.29
- [ Fixbug ]树表异步加载子节点,data数据未更新的问题。
- bee-table @2.2.29
-
v2.2.26 2019-12-25 ( release地址 )
- bee-table @2.2.26
- [ Fixbug ]Grid表格显示错位。
- [ Feature ]行点击事件关联单选功能。
- [ Fixbug ]行点击事件有延迟。
- bee-table @2.2.26
-
v2.2.28 2019-12-25 ( release地址 )
- bee-table @2.2.28
- [ Feature ]单选关联行样式改变。
- [ Fixbug ]表格交换列后,再拖拽列宽,作用元素不对。
- bee-table @2.2.28
-
v2.2.27 2019-12-25 ( release地址 )
- bee-table @2.2.27
- [ Fixbug ]多表头拖拽,报错 lastObj 为 undefined。
- bee-table @2.2.27
-
v2.2.23 2019-12-13 ( release地址 )
- bee-table @2.2.23
- [ Feature ]行点击事件关联单选功能。
- bee-table @2.2.23
-
v2.2.22 2019-12-13 ( release地址 )
- bee-table @2.2.22
- [ Fixbug ]Grid表格显示错位。
- [ Fixbug ]行点击事件有延迟。
- bee-table @2.2.22
-
v2.2.21 2019-12-05 ( release地址 )
- bee-table @2.2.21
- [ Feature ]大数据滚动加载,递归逻辑优化,willReceiveProps逻辑优化
- [ Fixbug ]记录 record 中的 children = [] 时,显示了多余的展开图标
- bee-table @2.2.21
-
v2.2.20 2019-12-04 ( release地址 )
- bee-table @2.2.20
- [ Fixbug ]嵌套表格,expandIconAsCell={true}时,拖拽列宽度,被调整的总是前一列。
- bee-table @2.2.20
-
v2.2.19 2019-11-30 ( release地址 )
- bee-table @2.2.19
- [ Fixbug ]树状表,兼容不传 onExpandedRowsChange 属性的情况,解决不能展开节点的问题。
- bee-table @2.2.19
-
v2.2.17 2019-11-25 ( release地址 )
- bee-table @2.2.17
- [ Feature ] 多表头表格支持拖拽。
- bee-table @2.2.17
-
v2.2.18 2019-11-25 ( release地址 )
- bee-table @2.2.18
- [ Feature ]必输列禁止设置隐藏。
- [ Fixbug ]解决固定列设置 required 无效的问题。
- bee-table @2.2.18
-
v2.2.16 2019-11-12 ( release地址 )
- bee-table @2.2.16
- [Fixbug]懒加载的树状表,在传了expandedRowKeys属性后,会导致点击+号无法展开。
- bee-table @2.2.16
-
v2.2.15 2019-10-29 ( release地址 )
- bee-table @2.2.15
- [Fixbug]树形表,onRowHover 方法返回参数异常。
- bee-table @2.2.15
-
v2.2.13 2019-10-19 ( release地址 )
- bee-table @2.2.13
- [ Fixbug ]Grid 多级表头在点隐藏按钮时,多级表头变成了一级表头。
- [ Fixbug ]单元格内容超出列宽时,表头和表体出现错位。
- bee-table @2.2.13
-
v2.2.14 2019-10-19 ( release地址 )
- bee-table @2.2.14
- [Update]优化多选表格data更新处理逻辑。
- bee-table @2.2.14
-
v2.2.12 2019-09-19 ( release地址 )
- bee-table @2.2.12
- [Feature]多选表格,新增 multiSelectConfig API,用于自定义 Checkbox 属性,如设置复选框为红色填充。
- [Fixbug]解决层级树大数据场景,动态改变data时,数据未同步的问题。
- [Fixbug]修正 props 拼写错误。
- bee-table @2.2.12
-
v2.2.11 2019-09-09 ( release地址 )
- bee-table @2.2.11
- [Update]嵌套表格,扩展行支持高度自适应。
- [Fixbug]解决多选表格,某一行禁用多选,通过行点击仍然可以操作多选框的问题。
- bee-table @2.2.11
-
v2.2.9 2019-09-03 ( release地址 )
- bee-table @2.2.9
- [Fixbug]multiSelect 未引入 PropTypes 报错bug
- bee-table @2.2.9
-
v2.2.8 2019-09-02 ( release地址 )
- bee-table @2.2.8
- [Feature]增加 autoCheckedByClickRows 参数,设置行点击事件是否自动勾选复选框。
- [Update]对 headerDisplayInRow 和 height 同时使用的情况做了处理,从组件层面避免错行。
- bee-table @2.2.8
-
v2.2.7 2019-09-02 ( release地址 )
- bee-table @2.2.7
- [Feature]树形表支持多级大数据量滚动加载。
- bee-table @2.2.7
-
v2.2.3 2019-08-26 ( release地址 )
bee-table
- [ Fixbug ]修复了类型为number、末位为0时的显示bug
-
v2.2.2 2019-08-26 ( release地址 )
bee-table
[ Update ] bodyDisplayInRow和headerDisplayInRow默认值设为true,即默认内容不换行以省略号形式展现
[ Feature ] table新增属性:showRowNum,展示序号.默认为false,设置为true时使用默认配置
将改变源数据
可自定义属性,其配置如下:
具体属性 说明 类型 默认值 name 表头展示的名称 string '序号' key 在数据中存储的key值 string '_index' width 列宽度 number 50 base 排序的基准值,为数字或者字母 number | string 0|'0' type 排序类型,默认为number类型;支持单字母按照ascii排序,如 'a','b','c' 'number' | 'ascii' 'number'
[ Update ] 点击行时同时触发点击勾选框的勾选或取消勾选
- 需配合高阶函数multiSelect使用
[ Feature ] 新增column属性:sortEnable,开启默认排序.
- 需配合高阶函数sort使用
- 默认为false,不排序
- 设置为true时,若设置fieldType='number',则按数字排序,否则按字符串排序
- 优先级低于sorter属性
[ Feature ]column新增titleAlign和contentAlign属性,控制标题和内容的居中
- 优先级高于textAlign属性
[ Feature ]column新增fontColor和bgColor属性,控制当前列的字体色和背景色.
- 优先级低于linkConfig中的linkColor
- 在TableCell.js中通过style方式加入
[ Feature column新增required属性,控制标题前面红色星号(*)的展示
[ Feature ]column新增fieldType属性,控制不同类型数据的渲染方式
优先级低于render属性
支持string,number,currency,bool,link,date类型
每种类型数据支持自定义配置,如下:
numberConfig[存在bug,已于2.2.3修复]
具体属性 说明 类型 默认值 thousand 是否展示千分符号 bool true preSymbol 数值的前缀 string null nextSymbol 数值的后缀 string null currencyConfig
具体属性 说明 类型 默认值 thousand 是否展示千分符号 bool true preSymbol 数值的前缀 string null nextSymbol 数值的后缀 string null precision 精度 number 2 makeUp 末位是否补零 bool true boolConfig
具体属性 说明 类型 默认值 trueText 数值为true时的展示文本 string '是' falseText 数值为false时的展示文本 string '否' linkConfig
具体属性 说明 类型 默认值 url 获取url的函数 function(text,record,index) null urlIndex 数据内url字段的key值 string null desc 鼠标hover时展示的title值,为false时不展示,true时展示链接的url,为字符串时展示字符串,为函数时展示返回值,如(text,record,index)=>'text' bool|string|func true descIndex 数据内desc字段的key值 string null linkType 打开窗口的方式 '_self'|'_blank' '_blank' linkColor 链接的字体颜色 string '#0073E1' underline hover时是否展示下划线 bool false className 链接的className string null url和urlIndex属性至少有一个,均存在时url优先级更高
desc和descIndex属性相比,desc优先级更高
dateConfig
具体属性 说明 类型 默认值 moment 传入的moment对象,必需 object - format 渲染的时间格式 string 'YYYY-MM-DD' 需要单独安装moment.js,并将moment对象传入
-
v2.2.1 2019-08-26 ( release地址 )
- bee-table @2.2.1
- [ Fixbug ] 解决了右侧固定列无法使用扩展功能的问题
- bee-table @2.2.1
-
v2.2.0 2019-08-21 ( release地址 )
- bee-table
- [ Fixbug ] 解决交换列中,事件使用时机不对的问题,导致如果完全自定义拖拽事件,多场景自定义拖拽事件的问题。
- [ Update ] 提供 onDragEnd、onDrop 等事件。
- bee-table
-
v2.1.13 2019-08-07 ( release地址 )
- bee-table @2.1.13
- [ Fixbug ] 解决了移动端switch所在行在拖拽问题,需升级switch到最新版本。
- [ Update ] 优化了拖拽行的功能,把交换行,改成插入行。
- bee-table @2.1.13
-
v2.1.11 2019-08-05 ( release地址 )
- bee-table @2.1.11
- [Fixbug]解决拖拽列宽无效的问题。
- bee-table @2.1.11
-
v2.1.10 2019-08-03 ( release地址 )
- bee-table @2.1.10
- [Fixbug]表头交换列的时候,如果title出入的dom ,目前无法拖拽问题。
- [Fixbug]解决嵌套表格带有固定列的场景,表行右侧列断开的问题。
- [Feature]增加拖拽列宽时的回调函数 onDraggingBorder 。
- [Fixbug]大数据场景,重新渲染时表体显示空白的问题。
- bee-table @2.1.10
-
v2.1.5 2019-07-06 ( release地址 )
- bee-table @2.1.5
- [Feature]拖拽改变列顺序的交互改进。
- [Fixbug]单选功能,当行内容出现换行时,固定列出现错位的问题。
- [Fixbug]列过滤面板不显示问题。
- bee-table @2.1.5
-
2.0.8-nc.4 2019-07-05 ( release地址 )
- 基于2.0.8-nc.3 、2.0.8-nc.0 修改了补丁,解决了拖拽表格宽度不够,断裂的问题。
-
v2.1.4 2019-07-02 ( release地址 )
- bee-table @2.1.4
- [Fixbug] 1. 滚动加载,支持单元格合并。
- [Fixbug] 2. 表格 column 为空时拖拽报错,容错处理。
- bee-table @2.1.4
-
2.0.30 2019-06-27 ( release地址 )
- multiSelect.js 文件修改,适配旧版本选不中的问题,代码如下:
js
//最新代码
// componentWillReceiveProps(nextProps){ // if('data' in nextProps){ // let obj = this.getCheckedOrIndeter(nextProps.data); // this.setState({ // ...obj, // data:ObjectAssign(nextProps.data), // }) // } // }
//发布的代码
componentWillReceiveProps(nextProps){ if(this.props.data != nextProps.data){ let obj = this.getCheckedOrIndeter(nextProps.data); this.setState({ ...obj, data:ObjectAssign(nextProps.data), }) } }
-
v2.1.3 2019-06-13 ( release地址 )
- bee-table @2.1.3
- [Feature] 单选表格,行选中后再次点击可取消选中
- [Fixbug] 表格前端多列排序规则调整为以用户传入的sorter规则优先
- bee-table @2.1.3
-
v2.1.2 2019-06-06 ( release地址 )
- bee-table @2.1.2
- [Fixbug]解决拖拽时,文字不能拖拽的问题。
- bee-table @2.1.2
-
v2.0.24 2019-05-22 ( release地址 )
- bee-table @2.0.24
- [Fixbug]使用 rowKey 的表格,行拖拽无法使用的问题
- [Feature]提供行拖拽的回调函数 onDropRow
- bee-table @2.0.24
-
v2.0.21 2019-05-22 ( release地址 )
- bee-table @2.0.21
- [Fixbug]表格数据为空时,表头列多时,滚动条隐藏
- bee-table @2.0.21
-
v2.0.22 2019-05-22 ( release地址 )
- bee-table @2.0.22
- [Fixbug]解决传入 emptyText 方法报错问题
- bee-table @2.0.22
-
v2.0.20 2019-05-21 ( release地址 )
- bee-table @2.0.20
- [Feature]增加singleSelect单选功能的高阶函数
- [Fixbug]解决嵌套表格节点数据展开后没有下拉 icon 的问题
- [Feature]“暂无数据”支持多语
- bee-table @2.0.20
-
v2.0.14 2019-04-25 ( release地址 )
- bee-table @2.0.14
- [Feature]实现行拖拽改变顺序
- [Fix]过滤列样式修改,以及jira字体等处理
- [Fix]table 表头拖拽操作优化以及事件多次绑定问题。
- bee-table @2.0.14
-
v2.0.13 2019-04-25 ( release地址 )
1、filterColumn内容超出8个字显示省略号,filterColumn 中item字体为12px,点击文字checkbox也可以选中 2、过滤列遮挡行线 3、每行第一列padding-left为12px,其他默认8px 4、增加表格内容是否显示在一行headerDisplayInRow、bodyDisplayInRow
-
v2.0.12 2019-04-11 ( release地址 )
- bee-table @2.0.12
- [Feature]优化嵌套子表格的样式
- bee-table @2.0.12
-
v2.0.10 2019-03-29 ( release地址 )
fix : 过滤列样式优化
-
v2.0.9 2019-03-27 ( release地址 )
- [Feature]bee-table @2.0.9
- 修改表头背景色、分割线颜色、文字颜色
- 示例中表格和表头行高统一为40px
- 操作列示例统一使用bee-popconfirm组件
- [Feature]bee-table @2.0.9
-
v2.0.8 2019-03-25 ( release地址 )
- [Fixbug]bee-table @2.0.8
- 紧急修复,componentWillUnmount 中 this.table 为空问题
- [Fixbug]bee-table @2.0.8
-
v2.0.7 2019-03-25 ( release地址 )
- [Fixbug]bee-table @2.0.7
- package.json中的文件,在组件代码中的使用情况。
- 所有示例中的依赖,全部换成tinper-bee的依赖。
- 排查key错误,修改table的源码进行处理,2个地方。
- 去掉lib中多选中的checkbox的引用
- 修改checkbox样式
- 行过滤点击已选的无效
- table拖拽后,表格宽度没有同步bug
- [Fixbug]bee-table @2.0.7
-
v2.0.6 2019-03-15 ( release地址 )
- [Fix]bee-table
- 去掉lib中多选中的checkbox的引用
- 修改checkbox样式
- 行过滤点击已选的无效
- table拖拽后,表格宽度没有同步bug
- [Fix]bee-table
-
v2.0.4 2019-03-07 ( release地址 )
- [Feature]bee-table @2.0.4
- 增加表格行hover背景色变量
- [Feature]bee-table @2.0.4