2017-09-19 16:37:03 +08:00
|
|
|
|
## mixin
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2017-11-09 19:54:20 +08:00
|
|
|
|
Table拓展功能方法。注:拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然在操作state会导致功能出现异常
|
|
|
|
|
|
2017-12-15 13:47:43 +08:00
|
|
|
|
## 如何引用
|
|
|
|
|
需要单独的去引用相应的js文件,目录在lib文件夹,示例如下:
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2017-12-15 13:47:43 +08:00
|
|
|
|
```js
|
2018-05-22 19:38:15 +08:00
|
|
|
|
import multiSelect from "tinper-bee/lib/multiSelect.js";
|
2017-12-15 13:47:43 +08:00
|
|
|
|
```
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2017-09-19 16:37:03 +08:00
|
|
|
|
### multiSelect
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
|
|
|
|
全选功能
|
|
|
|
|
|
|
|
|
|
#### Table新增参数
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| ------------------- | -------------------------- | -------- | -------- |
|
|
|
|
|
| multiSelect | 全选功能的配置对象,属性参见下面 | obj | {} |
|
|
|
|
|
| multiSelect.type | 全选功能的类型,多选或单选(暂时只支持多选) | string | checkbox |
|
|
|
|
|
| multiSelect.param | 通过设置该参数来设计获取的数据数组,默认返还所有数据 | string | '' |
|
|
|
|
|
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
2017-12-27 16:23:25 +08:00
|
|
|
|
| selectDisabled | 设置某一行数据无法被选中,使用类似于rowClassName | Function(record, index):bool | 无 |
|
2018-01-03 14:19:24 +08:00
|
|
|
|
| selectedRow | 设置某一行数据是否被选中,使用类似于rowClassName | Function(record, index):bool | 无 |
|
2017-12-27 16:23:25 +08:00
|
|
|
|
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
#### 使用
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
```js
|
|
|
|
|
import multiSelect from "tinper-bee/lib/multiSelect.js";
|
|
|
|
|
import { Table, Checkbox } from 'tinper-bee';
|
|
|
|
|
|
|
|
|
|
const MultiSelectTable = multiSelect(Table, Checkbox);
|
|
|
|
|
|
|
|
|
|
```
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2017-09-19 16:37:03 +08:00
|
|
|
|
### sort
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
|
|
|
|
排序功能
|
|
|
|
|
|
|
|
|
|
#### Column新增参数
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| ------ | ---------- | -------- | ---- |
|
|
|
|
|
| sorter | 排序函数,可以自定义 | Function | 无 |
|
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
#### 使用
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
```js
|
|
|
|
|
import sort from "tinper-bee/lib/sort.js";
|
|
|
|
|
import { Table, Icon } from 'tinper-bee';
|
|
|
|
|
|
|
|
|
|
const SortTable = sort(Table, Icon);
|
|
|
|
|
|
|
|
|
|
```
|
2017-09-18 15:18:42 +08:00
|
|
|
|
|
2017-09-28 16:52:58 +08:00
|
|
|
|
### sum
|
|
|
|
|
|
2017-12-14 11:02:00 +08:00
|
|
|
|
合计功能
|
2017-09-28 16:52:58 +08:00
|
|
|
|
|
|
|
|
|
#### Column新增参数
|
2017-12-24 21:42:58 +08:00
|
|
|
|
|
2017-09-28 16:52:58 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| ------ | ---------- | -------- | ---- |
|
2017-09-29 16:03:20 +08:00
|
|
|
|
| sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
|
2017-09-28 16:52:58 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import sum from "tinper-bee/lib/sum.js";
|
|
|
|
|
import { Table } from 'tinper-bee';
|
|
|
|
|
|
|
|
|
|
const SumTable = sum(Table);
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### dragColumn
|
|
|
|
|
|
|
|
|
|
拖拽列功能
|
|
|
|
|
|
|
|
|
|
#### dragColumn新增参数
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| ------ | ---------- | -------- | ---- |
|
|
|
|
|
| dragborder | 显示拖拽边框 | boolean | false |
|
|
|
|
|
| draggable | 是否可拖拽 | boolean | false |
|
|
|
|
|
| onDragStart | 拖拽开始回调函数 | function | () => {} |
|
|
|
|
|
| onDragEnter |拖拽进入回调函数 | function | () => {} |
|
|
|
|
|
| onDragOver | 拖拽划过回调函数 | function | () => {} |
|
|
|
|
|
| onDrop | 拖拽释放回调函数 | function | () => {} |
|
|
|
|
|
|
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import dragColumn from "tinper-bee/lib/dragColumn.js";
|
|
|
|
|
import { Table } from 'tinper-bee';
|
|
|
|
|
|
|
|
|
|
const DragColumnTable = dragColumn(Table);
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### filterColumn
|
|
|
|
|
|
|
|
|
|
过滤功能
|
|
|
|
|
|
|
|
|
|
#### filterColumn新增参数
|
|
|
|
|
|
|
|
|
|
无
|
|
|
|
|
|
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import filterColumn from "tinper-bee/lib/filterColumn.js";
|
|
|
|
|
import { Table, Checkbox, Popover, Icon } from 'tinper-bee';
|
2017-09-28 16:52:58 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
|
2017-09-28 16:52:58 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
```
|