表格 Table

何时使用

• 当有大量结构化的数据需要展现时，可使用 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

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

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

Table events

Data

Column

[v2.2.x新增] cellMenu

属性的参数说明如下:

其中,menu的配置如下:

[v2.2.2新增]fieldType

fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有string,number,currency,bool,link,date,select,stringChinese类型，支持自定义配置(string类型为默认类型)。

• stringChinese类型的渲染同string,在配合高阶组件sort使用时,可支持中文拼音排序

• numberConfig

• currencyConfig

• boolConfig

• linkConfig

url和urlIndex属性至少有一个，均存在时url优先级更高

desc和descIndex属性相比，desc优先级更高

• dateConfig

需要单独安装moment.js,并将moment对象传入

• selectConfig

无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 组件参数：

singleSelect 使用示例

• 单选功能

multiSelect 多选功能

如何使用

import multiSelect from "tinper-bee/lib/multiSelect.js";
import { Table, Checkbox } from 'tinper-bee';
const MultiSelectTable = multiSelect(Table, Checkbox);

API

Table 组件参数：

Data 数组参数：

multiSelect 使用示例

• 多选功能

sort 排序功能

如何使用

import sort from "tinper-bee/lib/sort.js";
import { Table, Icon } from 'tinper-bee';
const SortTable = sort(Table, Icon);

API

column 数组参数：

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 数组参数：

sum 使用示例

• 列合计（总计）

dragColumn 拖拽列功能

如何使用

import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';
const DragColumnTable = dragColumn(Table);

API

Table 组件参数：

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 组件参数：

bigData 使用示例

• 万行以上数据渲染
• 嵌套子表格滚动加载
• 多功能表格滚动加载
• 层级树大数据场景

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

快捷键API

注意事项

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

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

当表格场景比较复杂时，可以使用复杂表格ComplexGrid。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。

更新日志