Table

bee-table1.6.35changelogissue

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

引入机制

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

API

Table

快捷键部分参考示例 (快捷键在table中的简单使用应用)

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

Column

快捷键API

mixin

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

如何引用

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

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

multiSelect

选中功能组件

#### multiSelect 废弃部分的API

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

multiSelect 新增API

data 数据中新增参数

使用

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

const MultiSelectTable = multiSelect(Table, Checkbox);

sort

排序功能

Column新增参数

使用

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

const SortTable = sort(Table, Icon);

sum

合计功能

Column新增参数

使用

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

const SumTable = sum(Table);

dragColumn

拖拽列功能

dragColumn新增参数

使用

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。

配置

使用

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

配置

注:其他参数参见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

配置

注:其他参数参见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

配置

注:其他参数参见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}\},来使扩展后的固定列扩展成一样高度。