diff --git a/docs/api.md b/docs/api.md index 9bc7bb8..c3ef17a 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,11 +1,13 @@ # 表格 Table ## 何时使用 + - 当有大量结构化的数据需要展现时； - Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为； - 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。 ## 如何使用 + ``` import { Table } from 'tinper-bee'; @@ -108,7 +110,7 @@ import 'bee-table/build/Table.css'; | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string | -## 高阶函数 +### 高阶函数 Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常 @@ -119,7 +121,9 @@ import multiSelect from "tinper-bee/lib/multiSelect.js"; ``` ### multiSelect 多选功能 -#### API + +#### multiSelect:API + Data 数组参数： | 参数 | 说明 | 类型 | 默认值 | | ------------------- | -------------------------- | -------- | -------- | @@ -131,7 +135,7 @@ Table 组件参数： | ------------------- | -------------------------- | -------- | -------- | | getSelectedDataFunc | 返回当前选中的数据数组（设置在Table组件上） | Function | 无 | -#### 使用 +#### multiSelect:使用 ```js import multiSelect from "tinper-bee/lib/multiSelect.js"; @@ -143,7 +147,8 @@ const MultiSelectTable = multiSelect(Table, Checkbox); ### sort 排序功能 -#### API +#### sort:API + column 数组参数： | 参数 | 说明 | 类型 | 默认值 | @@ -151,7 +156,7 @@ column 数组参数： | sorter | 排序函数，可以自定义 | Function | 无 | | sorterClick | 排序钩子函数| Function | (coloum,type) | -#### 使用 +#### sort:使用 ```js import sort from "tinper-bee/lib/sort.js"; @@ -163,14 +168,15 @@ const SortTable = sort(Table, Icon); ### sum 合计功能 -#### API +#### sum:API + column 数组参数： | 参数 | 说明 | 类型 | 默认值 | | ------ | ---------- | -------- | ---- | | sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false | -#### 使用 +#### sum:使用 ```js import sum from "tinper-bee/lib/sum.js"; @@ -182,7 +188,8 @@ const SumTable = sum(Table); ### dragColumn 拖拽列功能 -#### API +#### dragColumn:API + Table 组件参数： | 参数 | 说明 | 类型 | 默认值 | | ------ | ---------- | -------- | ---- | @@ -191,7 +198,7 @@ Table 组件参数： | onDrop | 拖拽释放回调函数(交换列) | function | () => {} | | onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} | -#### 使用 +#### dragColumn:使用 ```js import dragColumn from "tinper-bee/lib/dragColumn.js"; @@ -203,11 +210,11 @@ const DragColumnTable = dragColumn(Table); ### filterColumn 过滤功能 -#### API +#### filterColumn:API 无 -#### 使用 +#### filterColumn:使用 ```js import filterColumn from "tinper-bee/lib/filterColumn.js"; @@ -217,9 +224,8 @@ const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon); ``` +### rendertype - -## rendertype 在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等 需要单独的去引用相应的js文件，目录在render文件夹，示例如下： @@ -230,13 +236,16 @@ import renderInput from "tinper-bee/lib/InputRender.js"; ``` ### InputRender + 输入框类型render -#### 依赖的组件 +#### InputRender:依赖的组件 + 该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。 -#### 配置 +#### InputRender:配置 + | 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------------------------------- | ---------- | ------ | | name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - | @@ -254,7 +263,7 @@ import renderInput from "tinper-bee/lib/InputRender.js"; | htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - | | reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - | -#### 使用 +#### InputRender:使用 ```js import renderInput from "tinper-bee/lib/InputRender.js"; @@ -264,13 +273,14 @@ const InputRender = renderInput(Form, FormControl, Icon); ``` ### DateRender + 日期类型render -#### 依赖的组件 +#### DateRender:依赖的组件 该render依赖于`moment`, `Datepicker`, `Icon` -#### 配置 +#### DateRender:配置 | 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------------------------------- | ---------- | ------ | | isclickTrigger | 是否使用点击触发编辑状态 | boolean | false | @@ -279,7 +289,7 @@ const InputRender = renderInput(Form, FormControl, Icon); 注:其他参数参见Datepicker组件参数配置 -#### 使用 +#### DateRender:使用 ```js import renderDate from "tinper-bee/lib/DateRender.js"; @@ -291,23 +301,24 @@ const DateRender = renderDate(Datepicker, Icon); ### SelectRender + 下拉框类型render -#### 依赖的组件 +#### SelectRender:依赖的组件 该render依赖于`Icon`,`Select` -#### 配置 +#### SelectRender:配置 + | 参数 | 说明 | 类型 | 默认值 | | -------------- | ---------------------------------------- | ------- | ----- | | isclickTrigger | 是否使用点击触发编辑状态 | boolean | false | | dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - | - 注:其他参数参见Select组件参数配置 -#### 使用 +#### SelectRender:使用 ```js import renderSelect from "tinper-bee/lib/SelectRender.js"; @@ -317,13 +328,16 @@ const SelectRender = renderSelect(Select, Icon); ``` ### CheckboxRender + 复选框类型render -#### 依赖的组件 +#### CheckboxRender:依赖的组件 + 该render依赖于`Icon`,`Checkbox` -#### 配置 +#### CheckboxRender:配置 + | 参数 | 说明 | 类型 | 默认值 | | -------------- | ---------------------------------------- | ------- | ----- | | onChange | 修改后触发回调函数 | function | () => {} | @@ -333,7 +347,7 @@ const SelectRender = renderSelect(Select, Icon); 注:其他参数参见Checkbox组件参数配置 -#### 使用 +#### CheckboxRender:使用 ```js import renderCheckbox from "tinper-bee/lib/CheckboxRender.js"; @@ -342,7 +356,7 @@ const CheckboxRender = renderCheckbox(Checkbox, Icon); ``` -## 快捷键API +### 快捷键API | 快捷键 | 快捷键说明 | 类型 | 默认值 | | --- | :--- | --- |--- | diff --git a/docs/menu.json b/docs/menu.json new file mode 100644 index 0000000..f17eb27 --- /dev/null +++ b/docs/menu.json @@ -0,0 +1,128 @@ +{ + "何时使用": {}, + "如何使用": {}, + "能力特性": { + "基础 Basic": { + "基本表格": "", + "默认无数据展示": "", + "固定表头": "", + "隔行换色": "", + "表格 Loading 加载": "", + "单元格内容居中": "", + "带边框": "" + }, + "滚动 Scroll View": { + "横向滚动条": "", + "纵向滚动条": "" + }, + "数据操作 Data Opetation": { + "渲染本地数据": "", + "渲染远程数据": "" + }, + "列渲染 Custom Render": { + "多列表头": "", + "数据关联": "", + "列合计（总计）": "" + }, + "编辑 Editor": { + "行编辑 - 行内编辑": "", + "单元格编辑": "", + "行编辑 - 弹框编辑": "" + }, + "列操作-锁定 Fixed": { + "左侧固定列": "", + "右侧固定列": "", + "动态设置列锁定、解除锁定": "" + }, + "列操作-过滤 Filter": { + "按条件、值过滤": "", + "复杂表格中行过滤": "" + }, + "列操作-隐藏 Hide": { + "列过滤面板": "" + }, + "列操作-排序 Sort": { + "列排序": "", + "后端列排序": "", + "多列排序": "" + }, + "列操作-拖拽 Drag": { + "拖拽改变列顺序": "", + "拖拽改变列宽度": "" + }, + "扩展行 Expanded Row": { + "嵌套子表格": "", + "树型表格数据展示": "", + "自定义表格标题、表尾、选中行颜色": "", + "紧凑型、宽松型": "", + "自定义行高": "", + "图片在表格中的展示": "", + "自定义行、列合并": "" + }, + "行操作-拖拽": { + "拖拽改变行顺序": "" + }, + "行操作-选择": { + "多选功能": "", + "单选功能": "" + }, + "无限滚动 Infinite-scroll": { + "万行以上数据渲染": "", + "嵌套子表格滚动加载": "", + "多功能表格滚动加载": "", + "层级树大数据场景": "" + }, + "分页 Pagination": { + "表格+分页": "" + } + }, + "API": { + "Table": "", + "Column": "", + "高阶函数": "", + "multiSelect 多选功能": { + "multiSelect:API":"", + "multiSelect:使用":"" + }, + "sort 排序功能": { + "sort:API":"", + "sort:使用":"" + }, + "sum 合计功能": { + "sum:API":"", + "sum:使用":"" + }, + "dragColumn 拖拽列功能": { + "dragColumn:API":"", + "dragColumn:使用":"" + }, + "filterColumn 过滤功能": { + "filterColumn:API":"", + "filterColumn:使用":"" + }, + "rendertype":"", + "InputRender": { + "InputRender:依赖的组件":"", + "InputRender:配置":"", + "InputRender:使用":"" + }, + "DateRender": { + "DateRender:依赖的组件":"", + "DateRender:配置":"", + "DateRender:使用":"" + }, + "SelectRender": { + "SelectRender:依赖的组件":"", + "SelectRender:配置":"", + "SelectRender:使用":"" + }, + "CheckboxRender": { + "CheckboxRender:依赖的组件":"", + "CheckboxRender:配置":"", + "CheckboxRender:使用":"" + }, + "快捷键API":"" + }, + "注意事项": {}, + "更新日志": {} +} \ No newline at end of file