Table
bee-table1.4.34changelogissue

表格是以结构化的方式来展示大量的信息最佳方法,使信息更易于阅读与理解。 表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据,小量的信息,静态数据以及不断地变动的数据。

引入机制

import Table from "bee-table"; import 'bee-table/build/Table.css';

API

Table

参数 说明 类型 默认值
data 传入的表格数据(key值必需,否则会导致部分功能出现问题。建议使用唯一的值,如id) array []
bordered 是否展示外边框和列边框 boolean false
columns 列的配置表,具体配置见下表 array -
defaultExpandAllRows 默认是否展开所有行 bool false
expandedRowKeys 展开的行,控制属性 array -
defaultExpandedRowKeys 初始扩展行键 array []
bodyStyle 添加到tablebody上的style object {}
style 添加到table上的style object {}
rowKey 如果rowKey是字符串,record [rowKey]将被用作键。如果rowKey是function,rowKey(record, index)的返回值将被用作键。 string or Function(record, index):string 'key'
rowClassName 获取行的classname Function(record, index, indent):string () => ''
expandedRowClassName 获取展开行的className Function(recode, index, indent):string () => ''
onExpand 展开行时的钩子函数 Function(expanded, record) () => ''
onExpandedRowsChange 函数在扩展行更改时调用 Function(expandedRows) () => ''
indentSize indentSize为每个级别的data.i.children,更好地使用column.width指定 number 15
onRowClick 行的点击事件钩子函数 Function(record, index, event) () => ''
onRowDoubleClick 行的双击事件钩子函数 Function(record, index, event) () => ''
expandIconAsCell 是否将expandIcon作为单元格 bool false
expandIconColumnIndex expandIcon的索引,当expandIconAsCell为false时,将插入哪个列 number 0
showHeader 是否显示表头 bool true
title 表格标题 Function -
footer 表格尾部 Function -
emptyText 无数据时显示的内容 Function () => 'No Data'
scroll 横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{ x: true, y: 300 } object {}
rowRef 获取行的ref Function(record, index, indent):string () => null
getBodyWrapper 添加对table body的包装 Function(body) body => body
expandedRowRender 额外的展开行 Function(record, index, indent):node -
expandIconAsCell 展开按钮是否单独作为一个单元格 bool false
expandRowByClick 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 bool false
footerScroll 表尾和body是否公用同一个横向滚动条。( 如果footer中也是一个table组件,并且也具有滚动条,那么也需要加入footerScroll参数。 ) bool false
loading 表格是否加载中 bool object(详情可以参考上面示例) false
haveExpandIcon 控制是否显示行展开icon.注:该参数只有在和expandedRowRender同时使用才生效 Function(record, index):bool () =>false
filterable 是否开启根据条件来过滤数据 bool false
filterDelay 触发过滤输入的时候的ms延迟时间 number 300
onFilterRowsChange 触发过滤输入操作以及其他的回调,回车执行函数或者失去焦点触发回调 (key,val) => () () => ()
onFilterRowsDropChange 过滤下拉条件的回调 (key,val)=>() () => ()
headerScroll 表头下是否显示滚动条 bool false

注意: data参数中的key值必需,否则会导致部分功能出现问题!建议使用唯一的值,如id

Column

参数 说明 类型 默认值
key 列的键 string -
className 传入列的classname String -
colSpan 该列的colSpan,设置列合并 Number -
title 列的标题 node -
dataIndex 显示数据记录的字段 String -
width 宽度的特定比例根据列的宽度计算 String/Number -
fixed 当表水平滚动时,此列将被固定:true或'left'或'right' true/'left'/'right' -
render cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置,可以设置单元格行/列合并 -
onCellClick 单击列的单元格时调用 Function(row, event) -
order 设置排序 string("descend"、"ascend") -
filterType 过滤下拉的类型.可选text,dropdown,date 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 () => ()

mixin

Table拓展功能方法。注:拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然在操作state会导致功能出现异常

如何引用

需要单独的去引用相应的js文件,目录在lib文件夹,示例如下:

import multiSelect from "tinper-bee/lib/multiSelect.js";

multiSelect

全选功能

Table新增参数

参数 说明 类型 默认值
multiSelect 全选功能的配置对象,属性参见下面 obj {}
multiSelect.type 全选功能的类型,多选或单选(暂时只支持多选) string checkbox
multiSelect.param 通过设置该参数来设计获取的数据数组,默认返还所有数据 string ''
getSelectedDataFunc 返回当前选中的数据数组 Function
selectDisabled 设置某一行数据无法被选中,使用类似于rowClassName Function(record, index):bool
selectedRow 设置某一行数据是否被选中,使用类似于rowClassName Function(record, index):bool

使用

import multiSelect from "tinper-bee/lib/multiSelect.js";
import { Table, Checkbox } from 'tinper-bee';

const MultiSelectTable = multiSelect(Table, Checkbox);

sort

排序功能

Column新增参数

参数 说明 类型 默认值
sorter 排序函数,可以自定义 Function
sorterClick 排序钩子函数 Function (coloum,type)

使用

import sort from "tinper-bee/lib/sort.js";
import { Table, Icon } from 'tinper-bee';

const SortTable = sort(Table, Icon);

sum

合计功能

Column新增参数

参数 说明 类型 默认值
sumCol 该列设置为合计列,合计行中会显示合计数据 boolean false

使用

import sum from "tinper-bee/lib/sum.js";
import { Table } from 'tinper-bee';

const SumTable = sum(Table);

dragColumn

拖拽列功能

dragColumn新增参数

参数 说明 类型 默认值
dragborder 显示拖拽边框 boolean false
draggable 是否可拖拽 boolean false
onDragStart 拖拽开始回调函数 function () => {}
onDragEnter 拖拽进入回调函数 function () => {}
onDragOver 拖拽划过回调函数 function () => {}
onDrop 拖拽释放回调函数 function () => {}

使用

import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';

const DragColumnTable = dragColumn(Table);

filterColumn

过滤功能

filterColumn新增参数

使用

import filterColumn from "tinper-bee/lib/filterColumn.js";
import { Table, Checkbox, Popover, Icon } from 'tinper-bee';

const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);

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);

使用注意

  • 如果使用了固定列,请给固定的列设定固定宽度既width属性。

  • 在使用expandedRowRender属性扩展表格时,如果同时使用了固定列。 需要给expandedRowRender中返回的对象添加style=\{{height: xxx}\},来使扩展后的固定列扩展成一样高度。