bee-table/docs/mixin.md

3.7 KiB
Raw Blame History

mixin

Table拓展功能方法。注拼接成复杂功能的table组件不能在render中定义需要像此例子声明在组件的外侧不然在操作state会导致功能出现异常

如何引用

需要单独的去引用相应的js文件目录在lib文件夹示例如下

import multiSelect from "tinper-bee/lib/multiSelect.js";

multiSelect

选中功能组件

multiSelect 废弃部分的API

参数 说明 类型 默认值
multiSelect 全选功能的配置对象,属性参见下面 obj {}
multiSelect.type 全选功能的类型,多选或单选(暂时只支持多选) string checkbox
multiSelect.param 通过设置该参数来设计获取的数据数组,默认返还所有数据 string ''
getSelectedDataFunc 返回当前选中的数据数组 Function
selectDisabled 设置某一行数据无法被选中使用类似于rowClassName Function(record, index):bool
selectedRow 设置某一行数据是否被选中使用类似于rowClassName Function(record, index):bool

multiSelect 新增API

data 数据中新增参数

参数 说明 类型 默认值
_checked 设置当前数据是否选中 boolean true/false
_disabled 禁用当前选中数据 boolean true/false
getSelectedDataFunc 返回当前选中的数据数组 Function

使用

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)

使用

import sort from "tinper-bee/lib/sort.js";
import { Table, Icon } from 'tinper-bee';

const SortTable = sort(Table, Icon);

sum

合计功能

Column新增参数

参数 说明 类型 默认值
sumCol 该列设置为合计列,合计行中会显示合计数据 boolean false

使用

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) => {}

使用

import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';

const DragColumnTable = dragColumn(Table);

filterColumn

过滤功能

filterColumn新增参数

使用

import filterColumn from "tinper-bee/lib/filterColumn.js";
import { Table, Checkbox, Popover, Icon } from 'tinper-bee';

const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);