1、修改文档样式 2、表格表头对齐方式兼容IE11
This commit is contained in:
izbz wh
parent
ac56add061
commit
fdd51bb06e
259
docs/api.md
259
docs/api.md
|
|
@ -106,11 +106,266 @@ import 'bee-table/build/Table.css';
|
||||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||||
| tabIndex | 设置焦点顺序 | number | 0
|
| tabIndex | 设置焦点顺序 | number | 0
|
||||||
|
|
||||||
{% include "mixin.md"%}
|
## mixin
|
||||||
|
|
||||||
|
Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常
|
||||||
|
|
||||||
|
## 如何引用
|
||||||
|
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import multiSelect from "tinper-bee/lib/multiSelect.js";
|
||||||
|
```
|
||||||
|
|
||||||
|
### multiSelect
|
||||||
|
|
||||||
|
选中功能组件
|
||||||
|
|
||||||
|
<font color="#ccc">
|
||||||
|
|
||||||
|
#### <font color="#ccc">multiSelect 废弃部分的API</font>
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------------------- | -------------------------- | -------- | -------- |
|
||||||
|
| 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
|
||||||
|
|
||||||
|
data 数据中新增参数
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------------------- | -------------------------- | -------- | -------- |
|
||||||
|
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||||
|
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||||
|
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||||
|
|
||||||
|
|
||||||
{% include "rendertype.md"%}
|
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```js
|
||||||
|
import multiSelect from "tinper-bee/lib/multiSelect.js";
|
||||||
|
import { Table, Checkbox } from 'tinper-bee';
|
||||||
|
|
||||||
|
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### sort
|
||||||
|
|
||||||
|
排序功能
|
||||||
|
|
||||||
|
#### Column新增参数
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | ---------- | -------- | ---- |
|
||||||
|
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||||
|
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```js
|
||||||
|
import sort from "tinper-bee/lib/sort.js";
|
||||||
|
import { Table, Icon } from 'tinper-bee';
|
||||||
|
|
||||||
|
const SortTable = sort(Table, Icon);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### sum
|
||||||
|
|
||||||
|
合计功能
|
||||||
|
|
||||||
|
#### Column新增参数
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | ---------- | -------- | ---- |
|
||||||
|
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```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) => {} |
|
||||||
|
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```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';
|
||||||
|
|
||||||
|
const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## rendertype
|
||||||
|
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||||
|
|
||||||
|
## 如何引用
|
||||||
|
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import renderInput from "tinper-bee/lib/InputRender.js";
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### InputRender
|
||||||
|
输入框类型render
|
||||||
|
|
||||||
|
#### 依赖的组件
|
||||||
|
该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
|
||||||
|
|
||||||
|
|
||||||
|
#### 配置
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||||
|
| 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 | - |
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```js
|
||||||
|
import renderInput from "tinper-bee/lib/InputRender.js";
|
||||||
|
import { Icon, Form , FormControl } from 'tinper-bee';
|
||||||
|
const InputRender = renderInput(Form, FormControl, Icon);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### DateRender
|
||||||
|
日期类型render
|
||||||
|
|
||||||
|
#### 依赖的组件
|
||||||
|
该render依赖于`moment`, `Datepicker`, `Icon`
|
||||||
|
|
||||||
|
|
||||||
|
#### 配置
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||||
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
|
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||||
|
|
||||||
|
|
||||||
|
注:其他参数参见Datepicker组件参数配置
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```js
|
||||||
|
import renderDate from "tinper-bee/lib/DateRender.js";
|
||||||
|
import Datepicker from "tinper-bee/lib/Datepicker";
|
||||||
|
import { Icon } from 'tinper-bee';
|
||||||
|
const DateRender = renderDate(Datepicker, Icon);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### SelectRender
|
||||||
|
下拉框类型render
|
||||||
|
|
||||||
|
#### 依赖的组件
|
||||||
|
该render依赖于`Icon`,`Select`
|
||||||
|
|
||||||
|
|
||||||
|
#### 配置
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||||
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
|
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注:其他参数参见Select组件参数配置
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```js
|
||||||
|
import renderSelect from "tinper-bee/lib/SelectRender.js";
|
||||||
|
import { Icon, Select } from 'tinper-bee';
|
||||||
|
const SelectRender = renderSelect(Select, Icon);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### CheckboxRender
|
||||||
|
复选框类型render
|
||||||
|
|
||||||
|
#### 依赖的组件
|
||||||
|
该render依赖于`Icon`,`Checkbox`
|
||||||
|
|
||||||
|
|
||||||
|
#### 配置
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||||
|
| onChange | 修改后触发回调函数 | function | () => {} |
|
||||||
|
| value | 设置是否选中值 | boolean | false |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
注:其他参数参见Checkbox组件参数配置
|
||||||
|
|
||||||
|
#### 使用
|
||||||
|
|
||||||
|
```js
|
||||||
|
import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";
|
||||||
|
import { Icon, Checkbox } from 'tinper-bee';
|
||||||
|
const CheckboxRender = renderCheckbox(Checkbox, Icon);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
### 使用注意
|
### 使用注意
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,7 @@ $checkbox-height:16px;
|
||||||
th {
|
th {
|
||||||
// background: $table-head-background-color;
|
// background: $table-head-background-color;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
// transition: background 0.3s ease;
|
// transition: background 0.3s ease;
|
||||||
&[colspan] {
|
&[colspan] {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,8 @@ export default function multiSelect(Table, Checkbox) {
|
||||||
|
|
||||||
return class NewMultiSelect extends Component {
|
return class NewMultiSelect extends Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
prefixCls: "u-table-mult-select"
|
prefixCls: "u-table-mult-select",
|
||||||
|
getSelectedDataFunc:()=>{}
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue