transfer-box

安装

npm install "transfer-box"

使用

• 引入组件，因为selectbox依赖于antd的table，所以如果发现样式缺失，说明项目启动后从没引用过antd的table，此时需要手动引用

import SelectBox from 'transfer-box';
import 'antd/lib/table/style'; //如果需要的话引用antd的table样式

• 引入selectbox样式

在项目入口引入“transfer-box/lib/index.less” 或 “transfer-box/lib/index.css”

@import '~transfer-box/lib/index.less';

参数

Prop | Type | Description | default ---|---|---|--- style | object | 样式，如果此处设置了width或height会覆盖掉上边的width，height | - childrenLoadQueryKey | string | 请求子节点key名称 | planId childrenLoadUrl | string | 请求子节点的url, expandable为true时，该属性必须设置 | - childrenLoadParam | object | 请求子节点参数 | - disabledPropsKey | string | 用于判断选中状态的key | isSelected height | number | 高度 | 450 width | number | 宽度 | - loadingL | bool | 左侧显示loading | - loadingR | bool | 右侧显示loading | - parentSelectable | bool | 父节点是否可选中 | true allSelect | bool | 是否显示全部添加 | false expandable | bool | 是否可展开 | true dataSourceL | array | 左侧数据源 | [] dataSourceR | array | 右侧数据源 | [] keyField | string | id字段名 | id displayField | string | 展示字段名 | name childCountField | string | 表示子节点数量的字段名称 | - searchPlaceholder | string | 搜索框提示语 | - title | string | 左右两侧box标题，左侧目前无效 | { l: '', r: '' } maxSelectedCount | number | 最大可选择数量 | - maxErrorCB | function | 超出最大数量的回调函数 | 弹框提示 labelRenderFunc | function | 标签渲染函数 | -

API

方法名 | Description | params ---|---|--- getSelection | 返回当前selectbox的状态 | 无 clear | 清空box状态 | 无

图示