bee-table/README.md

bee-table

react bee-table component for tinper-bee

some description...

install

使用方法

const columns = [
  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
  {
    title: '操作', dataIndex: '', key: 'd', render() {
      return <a href="#">一些操作</a>;
    },
  },
];

const data = [
  { a: '令狐冲', b: '男', c: 41, key: '1' },
  { a: '杨过', b: '男', c: 67, key: '2' },
  { a: '郭靖', b: '男', c: 25, key: '3' },
];

class Demo extends Component {
    render () {
        return (
              <Table
              columns={columns}
              data={data}
              title={currentData => <div>标题: 这是一个标题</div>}
              footer={currentData => <div>表尾: 我是小尾巴</div>}
              />
        )
    }
}

API

Table

参数	说明	类型	默认值
data	传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id）	array	[]
bordered	是否展示外边框和列边框	boolean	false
columns	列的配置表，具体配置见下表	array	-
defaultExpandAllRows	默认是否展开所有行	bool	false
expandedRowKeys	展开的行，控制属性	array	-
defaultExpandedRowKeys	初始扩展行键	array	[]
useFixedHeader	是否使用固定表头	bool	false
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(详情可以参考上面示例)
haveExpandIcon	控制是否显示行展开icon.注：该参数只有在和expandedRowRender同时使用才生效	Function(record, index):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)	-
onHeadCellClick	单击表头的单元格时调用	Function(row, event)	row 当前行的数据

mixin

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

如何引用

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

• 在tinper-bee中引用

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

• 单独安装bee-table 方式

import multiSelect from "bee-table/build/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	无

sort

排序功能

Column新增参数

参数	说明	类型	默认值
sorter	排序函数，可以自定义	Function	无

sum

合计功能

Column新增参数

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

filterColumn

过滤表头列示例

dragColumn

拖拽表头交换顺序示例

dragColumn新增参数

参数	说明	类型	默认值
draggable	当前表格可拖拽	boolean	false

拖拽变更宽度

目前支持此功能只支持普通表格【注：不支持tree结构的表头、不支持和表头拖拽交互列一起使用】示例

参数	说明	类型	默认值
dragborder	当前表格可拖拽改变宽度	boolean	false

rendertype

在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等

如何引用

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

import InputRender from "bee-table/render/InputRender.js"

安装依赖包

不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。

InputRender

输入框类型render

依赖的组件

该render依赖于bee-icon,bee-form-control,bee-form,bee-tooltip。

1. 下载依赖。例如：npm install bee-icon -S或者npm install bee-icon --save
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：import 'bee-icon/build/Icon.css;'

配置

参数	说明	类型	默认值
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	-

DateRender

日期类型render

依赖的组件

该render依赖于bee-icon,bee-datepicker,moment

1. 下载依赖。例如：npm install bee-icon -S或者npm install bee-icon --save
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：import 'bee-icon/build/Icon.css;'

配置

参数	说明	类型	默认值
isclickTrigger	是否使用点击触发编辑状态	boolean	false
type	控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker	string	"DatePicker"

注:其他参数参见bee-datepicker组件参数配置

SelectRender

输入框类型render

依赖的组件

该render依赖于bee-icon,bee-select

1. 下载依赖。例如：npm install bee-icon -S或者npm install bee-icon --save
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：import 'bee-icon/build/Icon.css;'

配置

参数	说明	类型	默认值
isclickTrigger	是否使用点击触发编辑状态	boolean	false
dataSource	数据的键值对，在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}]	array	-

注:其他参数参见bee-select组件参数配置

开发调试

$ git clone https://github.com/tinper-bee/bee-table
$ cd bee-table
$ npm install
$ npm run dev