表格 Table
issue

何时使用

  • 当有大量结构化的数据需要展现时,可使用 Table 组件;
  • Table 组件拥有多种可自由组合使用的功能特性,包括:
    1. 大数据渲染
    2. 拖拽交换、拖拽改变列宽
    3. 行选择(单选/多选)
    4. 表体滚动
    5. 数据操作
    6. 支持多种表格编辑形式
    7. 列锁定
    8. 列过滤
    9. 列隐藏
    10. 列排序
  • 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 通过行手柄进行拖拽排序,在 rowDraggAbletrue 时有效 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 : 当前行的index
event : 事件对象
onRowDoubleClick 行的双击事件钩子函数 Function(record, index, event) record : 当前行的数据
index : 当前行的index
event : 事件对象
onFilterChange 触发过滤输入操作以及下拉条件的回调 function(field,value,condition) field : 字段名称
value : 字段值
condition : 判断条件
onFilterClear 清除过滤条件的回调函数,回调参数为清空的字段 function(field) field : 字段名称
onRowHover 行hover时的回调函数 function(index,record) index : 当前行的index
record : 当前行的数据
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 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。

image

注:不要在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.61 2020-07-29 ( release地址 )

    Features

    • onDropRow增加参数targetIndex (17bf7b9)
  • v2.2.60 2020-07-23 ( release地址 )

    Features

    • setRowHeight性能优化 (bc5aa63)
  • v2.2.59 2020-07-22 ( release地址 )

    Bug Fixes

    Features

    • 普通表格新增onBodyScroll回调 (b42d80b)
  • v2.2.58 2020-07-20 ( release地址 )

    Features

    • 普通表格新增onBodyScroll回调 (b42d80b)
  • v2.2.57 2020-07-17 ( release地址 )

    Features

    • 条件过滤,输入框输入即查询[#605 (2a06e5f)
  • v2.2.56 2020-07-16 ( release地址 )

    Features

    • 行拖拽样式修改[JCJS-2307] (2cb8982)
  • v2.2.55 2020-07-14 ( release地址 )

    Features

    • 增加 hideDragHandle 参数,隐藏行拖拽把手[#609 (b5eab50)
  • v2.2.54 2020-07-14 ( release地址 )

    Bug Fixes

    Features

    • changelog (ba31790)
    • 列合计新增精度 (b80e703)
    • 列合计新增精度 (532fbb4)
    • 列合计新增精度 (b9c99bb)
    • 增加useDragHandle参数,支持行手柄拖拽[#607 (ba52c43)
    • 增加useDragHandle参数,支持行手柄拖拽[#607 (02d9625)
    • 排序回调新增data参数 (344e948)
    • 新增sumRender自定义列合计render函数 (4c6f69f)
    • 格式化 (386af02)
  • v2.2.53 2020-07-09 ( release地址 )

    Features

    • 新增sumRender自定义列合计render函数 (4c6f69f)
  • v2.2.52 2020-07-09 ( release地址 )

    Bug Fixes

    • onPaste行列参数修改 (3b8c65d)
  • v2.2.51 2020-07-09 ( release地址 )

    
                        
  • v2.2.50 2020-07-08 ( release地址 )

    Features

  • v2.2.49 2020-05-21 ( release地址 )

    Bug Fixes

    Features

  • v2.2.42 2020-03-22 ( release地址 )

    • bee-table @2.2.42
      • [ Feature ] 增加 columnKey 属性,column[columnKey]可作为主键。
  • v2.2.34 2020-02-10 ( release地址 )

    • bee-table @2.2.34
      • [ Fixbug ] 解决treetable右侧出现空白的问题。
      • [ Fixbug ] 解决模态框中表格滚动条计算问题。
  • v2.2.32 2020-01-07 ( release地址 )

    • bee-table @2.2.32
      • [ Fixbug ] 固定表头增加最大宽度限制。
  • v2.2.31 2020-01-07 ( release地址 )

    • bee-table @2.2.31
      • [ Fixbug ] 行拖拽,表头更新后,拖拽把手丢失。
  • v2.2.29 2019-12-26 ( release地址 )

    • bee-table @2.2.29
      • [ Fixbug ]树表异步加载子节点,data数据未更新的问题。
  • v2.2.26 2019-12-25 ( release地址 )

    • bee-table @2.2.26
      • [ Fixbug ]Grid表格显示错位。
      • [ Feature ]行点击事件关联单选功能。
      • [ Fixbug ]行点击事件有延迟。
  • v2.2.28 2019-12-25 ( release地址 )

    • bee-table @2.2.28
      • [ Feature ]单选关联行样式改变。
      • [ Fixbug ]表格交换列后,再拖拽列宽,作用元素不对。
  • v2.2.27 2019-12-25 ( release地址 )

    • bee-table @2.2.27
      • [ Fixbug ]多表头拖拽,报错 lastObj 为 undefined。
  • v2.2.23 2019-12-13 ( release地址 )

    • bee-table @2.2.23
      • [ Feature ]行点击事件关联单选功能。
  • v2.2.22 2019-12-13 ( release地址 )

    • bee-table @2.2.22
      • [ Fixbug ]Grid表格显示错位。
      • [ Fixbug ]行点击事件有延迟。
  • v2.2.21 2019-12-05 ( release地址 )

    • bee-table @2.2.21
      • [ Feature ]大数据滚动加载,递归逻辑优化,willReceiveProps逻辑优化
      • [ Fixbug ]记录 record 中的 children = [] 时,显示了多余的展开图标
  • v2.2.20 2019-12-04 ( release地址 )

    • bee-table @2.2.20
      • [ Fixbug ]嵌套表格,expandIconAsCell={true}时,拖拽列宽度,被调整的总是前一列。
  • v2.2.19 2019-11-30 ( release地址 )

    • bee-table @2.2.19
      • [ Fixbug ]树状表,兼容不传 onExpandedRowsChange 属性的情况,解决不能展开节点的问题。
  • v2.2.17 2019-11-25 ( release地址 )

    • bee-table @2.2.17
      • [ Feature ] 多表头表格支持拖拽。
  • v2.2.18 2019-11-25 ( release地址 )

    • bee-table @2.2.18
      • [ Feature ]必输列禁止设置隐藏。
      • [ Fixbug ]解决固定列设置 required 无效的问题。
  • v2.2.16 2019-11-12 ( release地址 )

    • bee-table @2.2.16
      • [Fixbug]懒加载的树状表,在传了expandedRowKeys属性后,会导致点击+号无法展开。
  • v2.2.15 2019-10-29 ( release地址 )

    • bee-table @2.2.15
      • [Fixbug]树形表,onRowHover 方法返回参数异常。
  • v2.2.13 2019-10-19 ( release地址 )

    • bee-table @2.2.13
      • [ Fixbug ]Grid 多级表头在点隐藏按钮时,多级表头变成了一级表头。
      • [ Fixbug ]单元格内容超出列宽时,表头和表体出现错位。
  • v2.2.14 2019-10-19 ( release地址 )

    • bee-table @2.2.14
      • [Update]优化多选表格data更新处理逻辑。
  • v2.2.12 2019-09-19 ( release地址 )

    • bee-table @2.2.12
      • [Feature]多选表格,新增 multiSelectConfig API,用于自定义 Checkbox 属性,如设置复选框为红色填充。
      • [Fixbug]解决层级树大数据场景,动态改变data时,数据未同步的问题。
      • [Fixbug]修正 props 拼写错误。
  • v2.2.11 2019-09-09 ( release地址 )

    • bee-table @2.2.11
      • [Update]嵌套表格,扩展行支持高度自适应。
      • [Fixbug]解决多选表格,某一行禁用多选,通过行点击仍然可以操作多选框的问题。
  • v2.2.9 2019-09-03 ( release地址 )

    • bee-table @2.2.9
      • [Fixbug]multiSelect 未引入 PropTypes 报错bug
  • v2.2.8 2019-09-02 ( release地址 )

    • bee-table @2.2.8
      • [Feature]增加 autoCheckedByClickRows 参数,设置行点击事件是否自动勾选复选框。
      • [Update]对 headerDisplayInRow 和 height 同时使用的情况做了处理,从组件层面避免错行。
  • v2.2.7 2019-09-02 ( release地址 )

    • bee-table @2.2.7
      • [Feature]树形表支持多级大数据量滚动加载。
  • 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 ] 解决了右侧固定列无法使用扩展功能的问题
  • v2.2.0 2019-08-21 ( release地址 )

    • bee-table
      • [ Fixbug ] 解决交换列中,事件使用时机不对的问题,导致如果完全自定义拖拽事件,多场景自定义拖拽事件的问题。
      • [ Update ] 提供 onDragEnd、onDrop 等事件。
  • v2.1.13 2019-08-07 ( release地址 )

    • bee-table @2.1.13
      • [ Fixbug ] 解决了移动端switch所在行在拖拽问题,需升级switch到最新版本。
      • [ Update ] 优化了拖拽行的功能,把交换行,改成插入行。
  • v2.1.11 2019-08-05 ( release地址 )

    • bee-table @2.1.11
      • [Fixbug]解决拖拽列宽无效的问题。
  • v2.1.10 2019-08-03 ( release地址 )

    • bee-table @2.1.10
      • [Fixbug]表头交换列的时候,如果title出入的dom ,目前无法拖拽问题。
      • [Fixbug]解决嵌套表格带有固定列的场景,表行右侧列断开的问题。
      • [Feature]增加拖拽列宽时的回调函数 onDraggingBorder 。
      • [Fixbug]大数据场景,重新渲染时表体显示空白的问题。
  • v2.1.8 2019-07-26 ( release地址 )

    • bee-table @2.1.8
      • [Feature]增加行拖拽开始时的回调函数 onDragRowStart。#264
      • [Fixbug]解决 onRowClick 回调函数中,事件对象属性均为 null 的问题。
      • [Fixbug]解决了内存泄漏问题。
      • [Fixbug]解决 utils.js 文件路径找不到的问题。
      • [Fixbug]当传入的 columns 为空时,不绑定拖拽事件。
  • v2.1.6 2019-07-13 ( release地址 )

    • bee-table @2.1.6
      • [Feature]table无数据时,支持通过 hideHeaderScroll 隐藏表头滚动条。#207
  • v2.1.5 2019-07-06 ( release地址 )

    • bee-table @2.1.5
      • [Feature]拖拽改变列顺序的交互改进。
      • [Fixbug]单选功能,当行内容出现换行时,固定列出现错位的问题。
      • [Fixbug]列过滤面板不显示问题。
  • 2.0.8-nc.4 2019-07-05 ( release地址 )

    1. 基于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 为空时拖拽报错,容错处理。
  • 2.0.30 2019-06-27 ( release地址 )

    1. 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规则优先
  • v2.1.2 2019-06-06 ( release地址 )

    • bee-table @2.1.2
      • [Fixbug]解决拖拽时,文字不能拖拽的问题。
  • v2.0.24 2019-05-22 ( release地址 )

    • bee-table @2.0.24
      • [Fixbug]使用 rowKey 的表格,行拖拽无法使用的问题
      • [Feature]提供行拖拽的回调函数 onDropRow
  • v2.0.21 2019-05-22 ( release地址 )

    • bee-table @2.0.21
      • [Fixbug]表格数据为空时,表头列多时,滚动条隐藏
  • v2.0.22 2019-05-22 ( release地址 )

    • bee-table @2.0.22
      • [Fixbug]解决传入 emptyText 方法报错问题
  • v2.0.20 2019-05-21 ( release地址 )

    • bee-table @2.0.20
      • [Feature]增加singleSelect单选功能的高阶函数
      • [Fixbug]解决嵌套表格节点数据展开后没有下拉 icon 的问题
      • [Feature]“暂无数据”支持多语
  • v2.0.14 2019-04-25 ( release地址 )

    • bee-table @2.0.14
      • [Feature]实现行拖拽改变顺序
      • [Fix]过滤列样式修改,以及jira字体等处理
      • [Fix]table 表头拖拽操作优化以及事件多次绑定问题。
  • 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]优化嵌套子表格的样式
  • v2.0.10 2019-03-29 ( release地址 )

    fix : 过滤列样式优化

  • v2.0.9 2019-03-27 ( release地址 )

    • [Feature]bee-table @2.0.9
      • 修改表头背景色、分割线颜色、文字颜色
      • 示例中表格和表头行高统一为40px
      • 操作列示例统一使用bee-popconfirm组件
  • v2.0.8 2019-03-25 ( release地址 )

    • [Fixbug]bee-table @2.0.8
      • 紧急修复,componentWillUnmount 中 this.table 为空问题
  • 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
  • v2.0.6 2019-03-15 ( release地址 )

    • [Fix]bee-table
      • 去掉lib中多选中的checkbox的引用
      • 修改checkbox样式
      • 行过滤点击已选的无效
      • table拖拽后,表格宽度没有同步bug
  • v2.0.4 2019-03-07 ( release地址 )

    • [Feature]bee-table @2.0.4
      • 增加表格行hover背景色变量