From a2b1950e2fa775643073a7ede08baea7475e9d00 Mon Sep 17 00:00:00 2001 From: huyueb <1062887235@qq.com> Date: Thu, 16 Nov 2017 10:56:52 +0800 Subject: [PATCH] update readme --- README.md | 180 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 152 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 43dfd7d..71560c0 100644 --- a/README.md +++ b/README.md @@ -55,33 +55,36 @@ class Demo extends Component { ### Table -|参数|说明|类型|默认值| -|:--|:---|:--|:---| -|data|传入的表格数据|array|[]| -|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）'的返回值将被用作键。| string or Function(record):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)|() => ''| -|onRowDoubleClick|行的双击事件钩子函数|Function(record, index)|() => ''| -|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| +| 参数 | 说明 | 类型 | 默认值 | +| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- | +| data | 传入的表格数据 | array | [] | +| 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）'的返回值将被用作键。 | string or Function(record):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 | - | +| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false | +| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false | ### Column @@ -97,7 +100,128 @@ class Demo extends Component { |render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-| -#### 开发调试 +## mixin + +Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常 + + + +### multiSelect + +全选功能 + +#### Table新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | -------------------------- | -------- | -------- | +| multiSelect | 全选功能的配置对象，属性参见下面 | obj | {} | +| multiSelect.type | 全选功能的类型，多选或单选（暂时只支持多选） | string | checkbox | +| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' | +| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 | + + + +### sort + +排序功能 + +#### Column新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------- | -------- | ---- | +| sorter | 排序函数，可以自定义 | Function | 无 | + + + +### sum + +排序功能 + +#### Column新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------- | -------- | ---- | +| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false | + + +## rendertype +在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等 + +## 如何引用 +需要单独的去引用相应的js文件，目录在render文件夹，示例如下： + +```js +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 | + +注:其他参数参见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组件参数配置 + + +## 开发调试 ```sh $ git clone https://github.com/tinper-bee/bee-table