bee-table/docs/mixin.md

136 lines
3.7 KiB
Markdown
Raw Normal View History

## mixin
2017-09-18 15:18:42 +08:00
Table拓展功能方法。注拼接成复杂功能的table组件不能在render中定义需要像此例子声明在组件的外侧不然在操作state会导致功能出现异常
## 如何引用
需要单独的去引用相应的js文件目录在lib文件夹示例如下
2017-09-18 15:18:42 +08:00
```js
2018-05-22 19:38:15 +08:00
import multiSelect from "tinper-bee/lib/multiSelect.js";
```
2017-09-18 15:18:42 +08:00
### multiSelect
2017-09-18 15:18:42 +08:00
2019-02-13 14:58:11 +08:00
选中功能组件
2017-09-18 15:18:42 +08:00
<font color="#ccc">
#### <font color="#ccc">multiSelect 废弃部分的API</font>
2017-09-18 15:18:42 +08:00
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| multiSelect | 全选功能的配置对象,属性参见下面 | obj | {} |
| multiSelect.type | 全选功能的类型,多选或单选(暂时只支持多选) | string | checkbox |
| multiSelect.param | 通过设置该参数来设计获取的数据数组,默认返还所有数据 | string | '' |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
| selectDisabled | 设置某一行数据无法被选中使用类似于rowClassName | Function(record, index):bool | 无 |
| selectedRow | 设置某一行数据是否被选中使用类似于rowClassName | Function(record, index):bool | 无 |
</font>
#### multiSelect 新增API
2019-02-13 14:58:11 +08:00
data 数据中新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| _checked | 设置当前数据是否选中 | boolean | true/false |
| _disabled | 禁用当前选中数据 | boolean | true/false
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
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
### sort
2017-09-18 15:18:42 +08:00
排序功能
#### Column新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| sorter | 排序函数,可以自定义 | Function | 无 |
2018-07-17 16:27:23 +08:00
| sorterClick | 排序钩子函数| Function | (coloum,type) |
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 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
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| 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 |
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
2018-05-22 19:38:15 +08:00
#### 使用
```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-07-17 10:22:51 +08:00
```